Vue.js实现v-for循环中单个元素的active类切换方法

Hey there! It looks like you're using a single shared variable (like isActive) to control the "active" class across all your looped elements, which is why every item with the material_icons class toggles at once. Let's fix this by giving each list item its own unique active state — here are a couple of straightforward approaches:

方法一：给每个列表项添加独立的active状态 #

This approach modifies each item in your listArtists array to include its own active flag. It's great if you don't mind adding a small property to your data objects.

1. 初始化激活状态
   当你首次加载listArtists数据时（无论是在data函数中定义，还是从API获取后），给每个元素添加一个默认值为false的active属性：

   // 示例：从API获取数据后处理
   async mounted() {
     const response = await fetch('你的API地址');
     const data = await response.json();
     // 给每个艺术家项添加active属性
     this.listArtists = data.map(item => ({
       ...item,
       active: false
     }));
   }
   

2. 更新模板代码
   将"active"类绑定到当前项的active属性，并在点击时切换该属性值：

   <div 
     v-for="(listArtist, index) in listArtists" 
     class="col s4 center" 
     id="art"
     :class="{ active: listArtist.active }"
     @click="listArtist.active = !listArtist.active"
   >
     <p>{{ listArtist.title_short }}</p>
     <p>{{ listArtist.artist.name }}</p>
     <p>{{ listArtist.album.title }}</p>
     <!-- 你的material_icons元素也可以复用这个状态 -->
     <i class="material_icons" :class="{ active: listArtist.active }">...</i>
   </div>
   

方法二：用索引跟踪激活状态（不修改原数据） #

如果你不想改动原始的listArtists对象，可以通过元素的索引来跟踪激活状态。

1. 在data中添加跟踪数组

   data() {
     return {
       listArtists: [],
       activeIndices: [] // 存储激活元素的索引
     };
   }
   

2. 添加切换状态的方法

   methods: {
     toggleActive(index) {
       const idx = this.activeIndices.indexOf(index);
       if (idx > -1) {
         // 如果已激活，移除索引取消激活
         this.activeIndices.splice(idx, 1);
       } else {
         // 如果未激活，添加索引标记激活
         this.activeIndices.push(index);
       }
     }
   }
   

3. 更新模板代码

   <div 
     v-for="(listArtist, index) in listArtists" 
     class="col s4 center" 
     id="art"
     :class="{ active: activeIndices.includes(index) }"
     @click="toggleActive(index)"
   >
     <p>{{ listArtist.title_short }}</p>
     <p>{{ listArtist.artist.name }}</p>
     <p>{{ listArtist.album.title }}</p>
     <i class="material_icons" :class="{ active: activeIndices.includes(index) }">...</i>
   </div>
   

额外技巧：单选模式（同一时间仅激活一个元素） #

如果你只希望同一时间有一个元素处于激活状态，可以用单个变量来存储当前激活的索引：

data() {
  return {
    listArtists: [],
    activeIndex: -1 // 初始值-1表示没有元素激活
  };
}

<div 
  v-for="(listArtist, index) in listArtists" 
  class="col s4 center" 
  id="art"
  :class="{ active: index === activeIndex }"
  @click="activeIndex = index"
>
  <!-- 你的内容 -->
</div>

核心问题在于单个变量无法区分循环中的不同元素，通过给每个元素分配独立状态或用索引跟踪，就能确保只有被点击的元素会切换"active"类。

内容的提问来源于stack exchange，提问作者Damien Compère