投资组合过滤器图片库不起作用[已关闭]

Question

我是vue js新手。我在练习的过程中遇到了一些困难。我希望，在我的 vue js 项目中，当访问者点击某个类别时，它将显示该类别中的所有图像。但如果我点击类别，我很快就会到达页面的最底部。我该如何解决这个问题？有人会怎么说？我在下面给出了我的模板和脚本的代码。

模板代码：

<template lang="">
<section class="section bg-custom-gray" id="portfolio">
    <div class="container">
        <h1 class="mb-5"><span class="text-danger">My</span> Portfolio</h1>
        <div class="portfolio">
            <div class="filters">
                <a href="#" data-filter=".new" class="active">New</a>
                <a v-for="portfolioCategorie in portfolioCategories" :key="portfolioCategorie.id" href="#" :data-filter="'.'+portfolioCategorie.details">
                    {{ portfolioCategorie.name }}
                </a>
                <router-link to="/">Web</router-link>
            </div>
            <div class="portfolio-container">

                <!-- Add code here for displaying new portfolios if needed -->
                <div v-for="newPortfolio in newportfolios" :key="newPortfolio.id" :class="'col-md-6 col-lg-4 new'">
                    <div class="portfolio-item">
                        <img :src="newPortfolio.cover_image" class="img-fluid" :alt="newPortfolio.title">
                        <div class="content-holder">
                            <a class="img-popup" :href="newPortfolio.cover_image"></a>
                            <div class="text-holder">
                                <h6 class="title">{{ newPortfolio.title }}</h6>
                                <p class="subtitle">{{ newPortfolio.short_des }}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div v-for="portfolio in portfolios" :key="portfolio.id" :class="[portfolio.portfolio_categoryname.details, 'col-md-6 col-lg-4']">
                    <div class="portfolio-item">
                        <img :src="portfolio.cover_image" class="img-fluid" :alt="portfolio.title">
                        <div class="content-holder">
                            <a class="img-popup" :href="portfolio.cover_image"></a>
                            <div class="text-holder">
                                <h6 class="title">{{ portfolio.title }}</h6>
                                <p class="subtitle">{{ portfolio.short_des }}</p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</section>
</template>

Vue js代码：

<script>
import axios from "../../axios";

export default {
    data() {
        return {
            portfolioCategories: [],
            portfolios: [],
            newportfolios: [],
        };
    },
    created() {
        this.getPortfolioCategory();
        this.getPortfolio();
        this.getNewPortfolio();
    },
    methods: {
        async getPortfolioCategory() {
            await axios
                .get("/portfolio/category")
                .then((respons) => {
                    this.portfolioCategories = respons.data.portfoliocategory;
                })
                .catch((error) => {
                    console.log("Error fetching portfolio category data");
                });
        },
        async getPortfolio() {
            await axios
                .get("/portfolio")
                .then((respons) => {
                    this.portfolios = respons.data.portfolios;
                    console.log(222);
                })
                .catch((error) => {
                    console.log("Error fetching portfolio data");
                });
        },
        async getNewPortfolio() {
            await axios
                .get("/new/portfolio")
                .then((respons) => {
                    this.newportfolios = respons.data.newportfolios;
                })
                .catch((error) => {
                    console.log("Error fetching new portfolio data");
                });
        },
    },
};
</script>

Answer 1

您需要在投资组合类别上添加 v-on:click.prevent 或 @click.prevent 来忽略普通标签功能并执行过滤投资组合的方法。

然后你可以添加一个filterPortifolioByCategory方法来执行过滤