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.

Phil · Accepted Answer · 2020-07-29 23:18:47Z

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>

edited Jul 29, 2020 at 23:18

answered May 5, 2017 at 2:06

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Thierri Cegantin Oliveira Over a year ago

Worked perfectly! Thanks!!

Collectives™ on Stack Overflow

VUE.JS Selecting a element inside a FOR loop

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related