我正在創建一個簡單的庫存“檢查器”，它基本上創建了 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 項提供“活動”類。我不知道如何回圈遍歷（v-for 回圈）專案以本質上添加一個 if(inventoryId == id){addclass 'active'} 到它。我可以在這里應用任何提示或不錯的 vue 技巧嗎？如果有什么不清楚的請告訴我！
uj5u.com熱心網友回復：
您可以將其他來源的陣列更改為包含 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'
我認為這會做
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/315957.html
標籤：javascript 数组 Vue.js v-for