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>