Javascript Vue.js使用v-for在单击时切换类

如何在vue.js中为列表呈现元素切换类？这个问题是答案很好的问题的延伸。我希望能够单独切换每个元素以及切换所有元素。我尝试过 一个具有以下代码的解决方案，但它感觉脆弱，似乎不起作用

另一种解决方案是使用单个变量来切换所有元素，然后每个元素都有一个局部变量，可以打开或关闭，但不知道如何实现

// html element
<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>

//in vue.js app
//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);
    }
}

//html元素
//在vue.js应用程序中
//dynamicItems和showItem将根据API响应进行填充
数据：{
动态项：[]，
showItem:boolean[]=[]，
showAll:boolean=false；
},
方法：{
托格里尔（）{
this.showAll=！this.showAll；
this.showItem.forEach（item=>item=this.showAll）；
}
}

我想你需要做的就是

v-bind:class="{ active: showItem || showAll }"

并从

toggleAll

---

更新数组值时还需要使用，因为数组元素不是反应性的。

下面是一个小示例，供您参考。这只是一个替代方案，而不是代码的精确副本

var-app=新的Vue({
el:“#应用程序”，
数据：{
动态：[
{id:1，name:'Niklesh'，selected:false}，
{id:2，名称：'Raut'，所选内容：false}
],
selectedAll:false，
},
方法：{
托格里尔（）{
for（让我加入这个。dynamicItems）{
this.dynamicItems[i].selected=this.selectedAll；
}
}
}
});
.active{
颜色：蓝色；
字体大小：20px；
}

全部切换
Id:{{item.Id}，名称：{{item.Name}
{{dynamicItems}}
您只需将
v-for
元素包装在另一个div中，并使类的绑定在该div上切换all，然后它将隐藏所有内容，而不是将其绑定到
v-for