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>