Portfolio Filter Image Gallery not working

Question

I am new to learning vue js. I am facing some difficulties while practicing. I want, in my vue js project when a visitor comes and clicks on a category, it will show all the images in that category. But if I click on the category it takes me to the very bottom of the page very quickly. How can I solve this? What would someone say? I have given the codes of my template and script below.

Template code:

<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 code:

<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

You need to add a v-on:click.prevent or @click.prevent on the portfolio category to ignore the normal tag functionality and execute a method to filter the portfolios.

then you can add a filterPortifolioByCategory method to perform the filter