Estoy creando un "verificador" de inventario simple que básicamente crea 14 divs que están "activos" o "inactivos". Con vue, creo estos divs con un simple bucle v-for:
<div class="inventory"> <div class="item" v-for="index in 14" :key="index" ></div> </div>Donde estoy atascado es que recibo datos de otra fuente que me proporciona una matriz con los números de los elementos del inventario que se consideran "activos".
por ejemplo:
[{"id": "5","date": "2021-10-08 11:30:55"},{"id": "4","date": "2021-10-08 11:30:54"}]Nota: la etiqueta de fecha es irrelevante para mi pregunta, pero da una idea de cómo me está buscando el objeto. hay más datos que son irrelevantes para mi pregunta
En este caso, eso significaría que debería dar una clase "activa" al artículo 4 y 5 en mi inventario. No veo cómo puedo recorrer los elementos (v-for looped) para agregarle esencialmente un if (inventoryId == id) {addclass 'active'}. ¿Algún consejo o truco agradable que pueda aplicar aquí? Si algo no está claro por favor hágamelo saber!
Puede cambiar la matriz de otra fuente para que sea una matriz que contenga una cantidad de id, tal vez algo como esto:
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)) }puede poner activeIds como una propiedad de estado/computada
y entonces
<div class="inventory"> <div class="item" v-for="index in 14" :class="activeIds.includes(index) ? 'active' : 'inactive'" :key="index" ></div> </div>También puede poner esta parte como propiedad calculada para mejorar
activeIds.includes(index) ? 'active' : 'inactive'creo que esto servirá