I have been working on a basic inventory "checker" that generates 14 divs labeled as either "active" or "inactive". Using Vue, I am able to create these divs with a simple v-for loop:
<div class="inventory">
<div class="item" v-for="index in 14" :key="index"></div>
</div>
However, I encounter a challenge when receiving data from an external source that provides an array of numbers representing the active inventory items.
For example:
[{"id": "5","date": "2021-10-08 11:30:55"},{"id": "4","date": "2021-10-08 11:30:54"}]
Please note: the date information is not relevant to my query, but it gives insight into the structure of the object. There is additional unnecessary data within it.
In this scenario, I need to assign an "active" class to the 4th and 5th item in my inventory based on the provided data. I am unsure how to iterate through the v-for looped items to conditionally add the 'active' class if the inventory id matches the supplied id. Any suggestions or handy Vue tricks that could assist me here? Feel free to reach out if anything needs clarifying!