VUE.JS Selecting a element inside a FOR loop

Question

I am trying to show/hide a DIV when the user clicks on another element. Both are inside each element of a FOR loop, dynamically loaded with VUE JS.

Example:

Item A 
Item B 
Item C 

When Item A is clicked:

Item A
INITIALLY HIDDEN ELEMENT
Item B
Item C

When Item b is clicked:

Item A
Item B
INITIALLY HIDDEN ELEMENT
Item C

My (veeery simplified version of the) code:

<tr v-for="item in items">
        <td>
             <span id="TRIGGER" @click="????">{{item.name}}</span>

             <div id="SHOW/HIDE DIV"></div>
        </td>
</tr>

In my attempts I created a boolean var, and changed value on click. But it (obviously) show/hide all divs, from all FOR elements.

Answer 1

Store a reference to the visible item so you can reference it as a visibility trigger.

Make sure you add a data property named visible , initialised to null

data: () => ({
  items: [], // loaded dynamically
  visible: null
})

<tr v-for="(item, index) in items">
  <td>
    <span :id="`TRIGGER_${index}`" @click="visible = item">{{item.name}}</span>

    <div :id="`SHOW-HIDE-DIV_${index}`" v-show="item === visible"></div>
  </td>
</tr>