[英]VUE.JS Selecting a element inside a FOR loop
I am trying to show/hide a DIV when the user clicks on another element.当用户单击另一个元素时,我试图显示/隐藏 DIV。 Both are inside each element of a FOR loop, dynamically loaded with VUE JS.两者都在 FOR 循环的每个元素内,使用 VUE JS 动态加载。
Example:例子:
Item A
Item B
Item C
When Item A is clicked:单击项目 A 时:
Item A
INITIALLY HIDDEN ELEMENT
Item B
Item C
When Item b is clicked:单击项目 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 value on click.在我的尝试中,我创建了一个布尔变量,并在单击时更改了值。 But it (obviously) show/hide all divs, from all FOR elements.但它(显然)从所有 FOR 元素中显示/隐藏所有 div。
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
确保添加一个名为visible
的data
属性,初始化为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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.