N
Nuxt8mo ago
isakwang

v-for where v-if only affects one element

Hello Not sure how to google for this so asking here. I have a list of elements with an @click directive and a v-if that toggles some elements within the parent. Currently im using a single ref, but that means all off them expand when one is clicked instead of that one. How can I fix this Example <div v-for="item in list" @click="expand"> <h1>{{item.label}}</h1> <p v-if="expand">{{ item.description }}</p> </div>
2 Replies
Ferrington
Ferrington8mo ago
If you add an isExpanded property to each item you can have:
<div
v-for="item in list"
@click="item.isExpanded = !item.isExpanded">
...
<p v-if="item.isExpanded">...</p>
</div>
<div
v-for="item in list"
@click="item.isExpanded = !item.isExpanded">
...
<p v-if="item.isExpanded">...</p>
</div>
Or create a separate object to track it, with the key being an item id
isakwang
isakwangOP8mo ago
leaning towards the last one and using the Nuxt UI table for inspiration. Thanks

Did you find this page helpful?