Vue3 Composition API实现列表点击按钮绑定active类问题求助

1. 检查变量与方法是否暴露给模板 #

Vue3 Composition API中，setup函数里定义的变量和方法必须通过return暴露，模板才能访问到。你的代码大概率漏了这一步，补全后如下：

import { ref } from 'vue';

const activeIndex = ref(0);
// 示例分页按钮数据，根据实际需求调整
const buttons = ref([1, 2, 3, 4, 5]);

const handleActive = (index) => {
    activeIndex.value = index;
};

// 假设goToPage是你的分页跳转方法，需同步暴露
const goToPage = (page) => {
    // 此处写分页逻辑
};

// 必须return所有模板要用到的变量和方法
return {
    activeIndex,
    buttons,
    handleActive,
    goToPage
};

2. 排查goToPage方法的执行问题 #

模板中点击事件是goToPage(button);handleActive(index)，如果goToPage未定义或内部报错，会阻断后续handleActive的执行。可以先单独测试handleActive，把点击事件改成@click="handleActive(index)"，验证active类是否能正常添加，排除goToPage的干扰。

3. 优化类绑定写法（可选） #

原数组语法在条件不满足时会生成空字符串，改成对象语法更清晰，避免多余空格：

<button 
    v-for="(button, index) in buttons"
    @click="goToPage(button);handleActive(index)"
    :class="{
        'pagination__control-button': true,
        'pagination__control-button--page-index': true,
        'pagination__control-button--active': activeIndex === index
    }"
    :key="index"
>{{ button }}</button>

4. 调整初始选中状态（按需） #

如果不需要默认选中第一个按钮，把activeIndex的初始值改为ref(-1)，并确保判断逻辑匹配即可。

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