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を作成し、クリック時に値を変更しました。しかし、それは（明らかに）全てのdivからすべてのdivを表示/非表示にします。

Answer 1

Easy！アイテム固有のプロパティを可視性トリガとして使用します。

あなたは完全に働いた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>