您如何在vue.js中切换列表呈现元素的类?该问题是对this的回答得很好的扩展。我希望能够分别切换每个元素以及同时切换所有元素。我尝试过 以下代码的解决方案,但感觉很脆弱,似乎无法正常工作。
另一种解决方案是使用单个变量切换所有元素,然后每个元素都有一个可以打开和关闭的局部变量,但不知道如何实现。
// 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);
}
}
答案 0 :(得分:2)
这里是实现您想要的小例子。这只是您的代码的另一种而非完全相同的副本。
var app = new Vue({
el:'#app',
data: {
dynamicItems: [
{id:1,name:'Niklesh',selected:false},
{id:2,name:'Raut',selected:false}
],
selectedAll:false,
},
methods: {
toggleAll(){
for(let i in this.dynamicItems){
this.dynamicItems[i].selected = this.selectedAll;
}
}
}
});
.active{
color:blue;
font-size:20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.9/vue.js"></script>
<div id="app">
<template>
<input type="checkbox" v-model="selectedAll" @change="toggleAll"> Toggle All
<div v-for="(item, i) in dynamicItems">
<div :class='{active:item.selected}'><input type="checkbox" v-model="item.selected">Id : {{item.id}}, Name: {{item.name}}</div>
</div>
{{dynamicItems}}
</template>
</div>
答案 1 :(得分:1)
我想你要做的就是这个
v-bind:class="{ active: showItem || showAll }"
并从toggleAll
在更新数组值时,您还需要使用Vue.set,因为数组元素没有反应性。