Currently, I am diving into the world of vue and facing a challenge in styling buttons dynamically when clicked individually. These buttons serve as filters for a list of products, and my goal is to apply one style when the filter is 'on' and another when it is 'off'. While I have succeeded in updating styles dynamically, the issue lies in all buttons changing their style upon any single click. On the bright side, the actual filtering function works perfectly (the products are properly filtered out upon clicking the respective button).
In the code snippet provided, the mode is passed to the BaseButton component, where it is applied as the class.
<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')
}
},
I attempted creating a computed value to add a .clicked property to the genusList object, but unfortunately, it did not provide a solution to the problem.