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

by

0👍

✅

You can change the array from other source to be an array containing number of id, maybe something like this:

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

you can put activeIds as a state / computed property

and then

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

You can also put this part as computed property for better

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

I think this will do

Leave a comment