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

Question

我正在创建一个简单的库存检查器。它基本上创建了14个div它们要么是"活动的"或";inactive"。使用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"}]

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

在这种情况下，这意味着我应该给出一个"active"类到我库存中的第4和第5项。我不知道如何循环(v-for循环)项目，基本上添加一个if(inventoryId == id){addclass 'active'}到它。我可以在这里应用什么技巧或好技巧吗?如果有什么不清楚的，请让我知道!

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))
}

你可以把activeid作为一个状态/计算属性

和

<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'

我想这就行了