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

Posted 2023-02-22

【中文标题】Vue.js 使用 v-for 单击时切换类

【英文标题】：Vue.js toggle class on click with v-for

【发布时间】：2019-08-06 12:11:00

【问题描述】：

如何在 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);
    

【问题讨论】：

您可以将v-for 元素包装在另一个div 中，并通过绑定类来切换所有内容，然后它将隐藏所有内容而不是将其绑定在v-for 上跨度>

【参考方案1】：

这是实现您想要的小示例。这只是您的代码的替代而不是精确副本。

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>

【参考方案2】：

我认为你需要做的就是这个

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

并从toggleAll中删除最后一行

您还需要在更新数组值时使用Vue.set，因为数组元素不是反应式的。