VUE.JS 在 FOR 循环中选择一个元素答案

【问题标题】：VUE.JS Selecting a element inside a FOR loopVUE.JS 在 FOR 循环中选择一个元素
【发布时间】：2017-10-03 08:48:50
【问题描述】：

当用户点击另一个元素时，我试图显示/隐藏一个 DIV。两者都在 FOR 循环的每个元素内，使用 VUE JS 动态加载。

例子：

Item A 
Item B 
Item C

当项目 A 被点击时：

Item A
INITIALLY HIDDEN ELEMENT
Item B
Item C

当项目 b 被点击时：

Item A
Item B
INITIALLY HIDDEN ELEMENT
Item C

我的（非常简单的）代码：

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

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

在我的尝试中，我创建了一个布尔变量，并在点击时更改了值。但它（显然）从所有 FOR 元素中显示/隐藏所有 div。

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

存储对可见项的引用，以便您可以将其作为可见性触发器进行引用。

确保添加一个名为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>

【讨论】：

完美运行！谢谢！！