Vue3 将活动 class 绑定到列表中当前单击的按钮

Question

我想将活动 class 切换到当前单击的按钮。 有 5 个按钮，我希望活动的 class 仅分配给单击的按钮。 我想出了一个简单的解决方案，但由于某种原因它不起作用。

class 是pagination__control-button--active 。

Javascript：

import { ref } from 'vue';

const activeIndex = ref(0);

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

HTML：

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

我正在使用 Vue 3 和 Composition API

Answer 1

在 Vue class 绑定工作有点不同，查看文档： https://vuejs.org/guide/essentials/class-and-style.html

对于您的情况，我建议如下：

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