如何为Vue中v-for循环生成的指定元素添加active类？

解决方案 #

核心思路是先把需要标记为活跃的id预处理成方便查询的结构，再配合Vue的动态类绑定语法实现效果，具体实现如下：

步骤1：预处理活跃id集合

为了避免每次循环都遍历接口返回的数组查询，建议在计算属性中把活跃项的id提取为Set结构，同时统一转换为数字类型，避免和v-for生成的数字索引出现类型不匹配的问题：

// 假设接口返回的活跃数据存在变量 activeItems 中
// Vue2 选项式写法
computed: {
  activeIdSet() {
    return new Set(this.activeItems.map(item => Number(item.id)))
  }
}

// Vue3 组合式写法
import { computed } from 'vue'
const activeIdSet = computed(() => new Set(activeItems.value.map(item => Number(item.id))))

步骤2：修改模板的动态类绑定

利用Vue的:class语法，在v-for循环时判断当前索引是否在活跃id集合中，匹配就自动添加active类：

<div class="inventory">
  <div 
    class="item" 
    v-for="index in 14" 
    :key="index"
    :class="{ active: activeIdSet.has(index) }"
  ></div>
</div>

可选简化写法

如果你的库存项数量很少，也可以不预处理Set，直接在模板中做判断：

<div 
  class="item" 
  v-for="index in 14" 
  :key="index"
  :class="{ active: activeItems.some(item => Number(item.id) === index) }"
></div>

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