Vue.js作品筛选图片画廊点击分类跳转底部问题求助

问题根源 #

你使用的<a href="#"></a>标签会触发浏览器默认锚点跳转行为，href="#"会强制页面滚动到顶部（部分场景下可能表现为跳到底部），这是导致页面跳转的直接原因；同时当前代码未实现分类筛选的核心逻辑。

解决步骤 #

1. 阻止a标签默认跳转行为 #

修改模板中的分类链接，添加@click.prevent指令阻止默认跳转，同时绑定筛选方法：

<div class="filters">
    <a href="#" data-filter=".new" class="active" @click.prevent="setFilter('new')">New</a>
    <a v-for="cat in portfolioCategories" :key="cat.id" 
       href="#" :data-filter="'.'+cat.details" 
       @click.prevent="setFilter(cat.details)">
        {{ cat.name }}
    </a>
    <router-link to="/">Web</router-link>
</div>

2. 实现分类筛选逻辑 #

在脚本中添加筛选状态和方法，用计算属性过滤要展示的内容：

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

export default {
    data() {
        return {
            portfolioCategories: [],
            portfolios: [],
            newportfolios: [],
            activeFilter: 'new' // 默认选中New分类
        };
    },
    created() {
        this.getPortfolioCategory();
        this.getPortfolio();
        this.getNewPortfolio();
    },
    methods: {
        async getPortfolioCategory() {
            try {
                const res = await axios.get("/portfolio/category");
                this.portfolioCategories = res.data.portfoliocategory;
            } catch (err) {
                console.log("获取分类数据失败");
            }
        },
        async getPortfolio() {
            try {
                const res = await axios.get("/portfolio");
                this.portfolios = res.data.portfolios;
            } catch (err) {
                console.log("获取作品集数据失败");
            }
        },
        async getNewPortfolio() {
            try {
                const res = await axios.get("/new/portfolio");
                this.newportfolios = res.data.newportfolios;
            } catch (err) {
                console.log("获取新品作品集数据失败");
            }
        },
        setFilter(filter) {
            this.activeFilter = filter;
            // 可选：通过动态class切换选中状态，替代手动操作DOM
        }
    },
    computed: {
        displayItems() {
            if (this.activeFilter === 'new') {
                // 按需调整：显示新品+所有作品集，或仅显示新品
                return [...this.newportfolios, ...this.portfolios];
            }
            // 筛选对应分类的作品集
            return this.portfolios.filter(item => item.portfolio_categoryname.details === this.activeFilter);
        }
    }
};
</script>

3. 更新模板展示部分 #

用计算属性displayItems替代原来的两个独立v-for：

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

替代方案：替换a标签为非跳转元素 #

如果不想使用a标签，直接换成span并添加样式，完全避免默认跳转：

<div class="filters">
    <span :class="['filter-btn', activeFilter === 'new' ? 'active' : '']" @click="setFilter('new')">New</span>
    <span v-for="cat in portfolioCategories" :key="cat.id" 
          :class="['filter-btn', activeFilter === cat.details ? 'active' : '']" 
          @click="setFilter(cat.details)">
        {{ cat.name }}
    </span>
    <router-link to="/">Web</router-link>
</div>

给.filter-btn添加与原a标签一致的CSS样式，保证视觉效果统一。

内容的提问来源于stack exchange，提问作者Rakib Hasan