如何将 class 添加到使用 v-for 循环创建的特定元素？

Question

我正在创建一个简单的清单“检查器”，它基本上创建了 14 个“活动”或“非活动”的 div。使用 vue，我使用简单的 v-for 循环创建这些 div：

<div class="inventory">
 <div class="item" v-for="index in 14" :key="index" ></div>
</div>

我卡住的地方是我从另一个来源接收数据，该来源为我提供了一个数组，其中包含被视为“活动”的库存项目的数量。

例如：

[{"id": "5","date": "2021-10-08 11:30:55"},{"id": "4","date": "2021-10-08 11:30:54"}]

注意：日期标签与我的问题无关，但它给出了对象如何寻找我的想法。里面有更多与我的问题无关的数据

在这种情况下，这意味着我应该为库存中的第 4 项和第 5 项提供“活动”class。我看不出如何循环遍历（v-for 循环）项目以实质上向其添加 if(inventoryId == id){addclass 'active'} 。我可以在这里应用任何提示或不错的 vue 技巧吗？如果有任何不清楚的地方，请告诉我！

Answer 1

您可以将来自其他来源的数组更改为包含 id 数量的数组，可能是这样的：

let otherSource = [{"id": "5","date": "2021-10-08 11:30:55"},{"id": "4","date": "2021-10-08 11:30:54"}]
// activeIds as a state/data
this.activeIds = otherSource.map(el => Number(el.id))
// activeIds as computed property
activeIds(){
   return otherSource.map(el => Number(el.id))
}

您可以将 activeIds 作为状态/计算属性

然后

<div class="inventory">
  <div class="item" v-for="index in 14" :class="activeIds.includes(index) ? 'active' : 'inactive'" :key="index" ></div>
</div>

你也可以把这部分作为计算属性更好

activeIds.includes(index) ? 'active' : 'inactive'

我想这样就可以了

如何将 class 添加到使用 v-for 循环创建的特定元素？

How to add a class to specific elements created with a v-for loop?

javascript

arrays

vue.js

v-for