我在学习vue的过程中，我被如何让这些按钮在点击时分别动态地设置样式难住了。这些是产品列表的过滤器，我想在过滤器“打开”时应用一种样式，在过滤器“关闭”时应用另一种样式。我可以让样式动态更新，但是当点击其中任何一个按钮时，所有的按钮都会改变样式。实际的过滤器功能正如预期的那样工作（当点击该产品的按钮时，产品正在被过滤掉）。
在程式码片段中，模式会传递至BaseButton组件，然后套用为类别。

<template>
    <ul>
        <li v-for="genus of genusList" :key="genus.label">
            <BaseButton @click="filterGenus(genus.label)"  :mode="genusClicked.clicked ? 'outline' :''">
                {{ genus.label }}
            </BaseButton>
        </li>
        <BaseButton @click="clearFilter()" mode="flat">Clear Filter</BaseButton>
    </ul>
    </template>


    methods: {
        filterGenus(selectedGenus) {
            this.clickedGenus = selectedGenus
            this.clicked = !this.clicked
            this.$emit('filter-genus', selectedGenus)
        },
        clearFilter() {
            this.$emit('clear-filter')
        }
    },

我试过生成一个计算值，将.clicked值添加到genusList对象，但似乎没有帮助。