Nuxt•5mo ago

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•5mo 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

isakwangOP•5mo ago

leaning towards the last one and using the Nuxt UI table for inspiration. Thanks

Gaming

Programming

v-for where v-if only affects one element