Vue中如何实现多个选中分类项背景色保持绿色？

没问题！要实现多选功能其实很简单，只需要把原来记录单个选中项的逻辑改成记录多个选中项的集合就行。我给你调整一下代码，保证所有选中的分类都能保持绿色背景：

修改后的完整代码 #

模板部分

<div 
  class="categories" 
  v-for="category in categories" 
  :key="category._id" <!-- 改用分类ID做key，比index更稳定，避免列表更新出问题 -->
  @click="toggleCategory(category._id)" 
  :class="selectedCategories.includes(category._id) ? 'green' : 'gray'"
> 
  {{ category.category_name }} 
</div>

Script部分

export default {
  data() {
    return {
      categories: [], // 你的分类数据源
      selectedCategories: [], // 存储所有选中的分类ID
      AddCategory: [] // 如果你还需要保留这个数组存选中ID，可以继续用，否则可直接合并到selectedCategories
    }
  },
  methods: {
    toggleCategory(categoryId) {
      // 判断当前分类是否已被选中
      const isSelected = this.selectedCategories.includes(categoryId);
      
      if (isSelected) {
        // 已选中则从选中列表移除
        this.selectedCategories = this.selectedCategories.filter(id => id !== categoryId);
        // 同步更新AddCategory数组（如果需要的话）
        this.AddCategory = this.AddCategory.filter(id => id !== categoryId);
      } else {
        // 未选中则添加到选中列表
        this.selectedCategories.push(categoryId);
        this.AddCategory.push(categoryId);
      }
    }
  }
}

样式部分（保持不变）

.green { background-color: #41B883; }
.gray { background-color: #e5e0ed; }

关键修改说明 #

1. 数据结构调整：把原来的selectedIndex（单个索引）换成selectedCategories数组，用来存储所有选中的分类ID，这样就能同时记录多个选中项了。
2. 点击逻辑改为切换：新的toggleCategory方法会判断当前分类是否已选中，已选中就移除，未选中就添加，实现了多选的切换效果。
3. Class绑定逻辑更新：用selectedCategories.includes(category._id)来判断当前分类是否应该显示绿色背景，只要ID在选中数组里，就会应用green类。
4. 优化Key值：把循环的key从index改成category._id，这是Vue的最佳实践，避免列表更新时出现不必要的渲染问题。

如果你的AddCategory数组和selectedCategories功能重复，其实可以直接合并成一个数组，减少代码冗余哦～

内容的提问来源于stack exchange，提问作者sara97