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

Question

当用户单击另一个元素时，我试图显示/隐藏 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。

Answer 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>