• Home
  • Jobs
  • Courses
  • Questions
  • Teachers
  • For business
  • ES/EN

0

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

I am creating a simple inventory "checker" which basically creates 14 divs that are either "active" or "inactive". With vue I create these divs with a simple v-for loop:

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

Where I'm stuck is that I receive data from another source that provides me an array with numbers of the inventory items that are considered "active".

for example:

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

Note: the date tag is irrelevant for my question but it gives an idea how the object is looking for me. there is more data in it that is irrelevant for my question

In this case that would mean I should give an "active" class to the 4th and 5th item in my inventory. I don't see how I can loop through the (v-for looped) items to essentially add a if(inventoryId == id){addclass 'active'} to it. Any tips or nice vue tricks I could apply here? If anything is unclear please let me know!

about 1 month ago ·

Juan Pablo Isaza

1 answers
Answer question

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

about 1 month ago · Juan Pablo Isaza Report
Answer question
Find remote jobs
Loading

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Plans Our process Sales
Legal
Terms and conditions Privacy policy
© 2022 PeakU Inc. All Rights Reserved.