Is there a way to efficiently toggle classes in vue.js for rendered list elements? Building upon the insights shared in this previously addressed question, I am seeking a method to individually toggle each element as well as collectively toggle all of them. Despite my attempts with the code provided below, the solution feels fragile and unresponsive.
Alternatively, is it feasible to utilize a singular variable for toggling all elements while allowing each element to possess its own local variable for individual toggling? Implementation guidance on this approach would be greatly appreciated.
// HTML snippet
<button v-on:click="toggleAll"></button>
<div v-for="(item, i) in dynamicItems" :key=i
v-bind:class="{ active: showItem }"
v-on:click="showItem[i] = !showItem[i]">
</div>
// Vue.js application logic
//dynamicItems and showItem will be populated based on API response
data: {
dynamicItems: [],
showItem: boolean[] = [],
showAll: boolean = false;
},
methods: {
toggleAll(){
this.showAll = !this.showAll;
this.showItem.forEach(item => item = this.showAll);
}
}