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

Posted 2023-02-23

【中文标题】VUE.JS 在 FOR 循环中选择一个元素

【英文标题】：VUE.JS Selecting a element inside a FOR loop

【发布时间】：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。

【参考方案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>

【讨论】：

完美运行！谢谢！！