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 

我的代码（的veeery简化版本）：

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

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

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

Answer 1

简单！使用项目最独特的属性作为可见性触发器。

确保您有一个data属性命名visible，初始化添加到null

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

    <div id="SHOW-HIDE-DIV" v-show="visible === item.name"></div> 
    </td> 
</tr>