VUE.JS Selecting an element inside a FOR loop
I am trying to show / hide a DIV when the user clicks on another element. Both are found inside each element of the FOR loop dynamically loaded by VUE JS.
Example:
Item A
Item B
Item C
On clicking item A:
Item A
INITIALLY HIDDEN ELEMENT
Item B
Item C
On clicking item b:
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 the value on push. But it (obviously) shows / hides all divs, from all FOR elements.
+3
source to share
1 answer
Easy! Use elements of the most unique property as a visibility trigger.
Make sure you add a property data
named visible
, initializednull
<tr v-for="item in items">
<td>
<span id="TRIGGER" @click="visible = item.name">{{item.name}}</span>
<div id="SHOW-HIDE-DIV" v-show="visible === item.name"></div>
</td>
</tr>
+1
source to share