訪問v-for中的兄弟元素

Question

Vuejs 2的新手需要一些幫助來了解如何完成此操作。

所以，我有一個模板，看起來像下面這樣：

<template> 
    <div class="wrapper"> 
     <div class="item" v-for="item in items"> 
      <div class="item"> 
       <div class="title">{{ item.title }}</div> 
       <div class="action"> 
        <a href="#" @click.prevent="editSettings(item, $event)"> 
         Click Me 
        </a> 
       </div> 
      </div> 
      <div v-if="showSettings" class="settings"> 
       <!-- Settings component for this item. --> 
       <settings-panel item="item"></settings-panel> 
      </div> 
     </div> 
    </div> 
</template> 

腳本是這樣的：

export default { 
    data() { 
     return { 
      items: [ 
       // This data is from an API usually and only 
       // shown here for example purposes 
       { id: 1, title: 'Title 1' }, 
       { id: 2, title: 'Title 2' }, 
       { id: 3, title: 'Title 3' }, 
       { id: 4, title: 'Title 4' } 
      ], 
      showSettings: false 
     }; 
    }, 
    methods: { 
     editSettings(item, event) { 
      // Only show the clicked items settings, not all 
      this.showSettings = !showSettings; 
     } 
    } 
} 

什麼是隻顯示爲設置面板的最簡單和乾淨的方法被點擊的項目？現在，如果我點擊Click Me設置，所有設置都會打開。代碼中列出的data僅用於此示例，但是來自API，所以我沒有太多關於操作這些數據的事情。

任何人都可以幫助我走向正確的方向嗎？

Answer 1

而不是使用showSettings添加一個selectedItem。

export default { 
    data() { 
     return { 
      items: [ 
       // This data is from an API usually and only 
       // shown here for example purposes 
       { id: 1, title: 'Title 1' }, 
       { id: 2, title: 'Title 2' }, 
       { id: 3, title: 'Title 3' }, 
       { id: 4, title: 'Title 4' } 
      ], 
      selectedItem: null 
     }; 
    }, 
    methods:{ 
     selectItem(item){ 
     if (this.selectedItem === item) this.selectedItem = null 
     else this.selectedItem = item 
     } 
    } 
} 

並修改模板設置的項目被點擊時selectedItem和顯示設置，只有在selectedItem是當前項目。

<template> 
    <div class="wrapper"> 
     <div class="item" v-for="item in items"> 
      <div class="item"> 
       <div class="title">{{ item.title }}</div> 
       <div class="action"> 
        <a href="#" @click.prevent="selectItem(item)"> 
         Click Me 
        </a> 
       </div> 
      </div> 
      <div v-if="selectedItem === item" class="settings"> 
       <!-- Settings component for this item. --> 
       <settings-panel item="item"></settings-panel> 
      </div> 
     </div> 
    </div> 
</template> 

如果當前選擇的項目不是被點擊的項目，上面將顯示被點擊的項目的設置。如果當前選擇的項目是被點擊的項目，它將隱藏設置。