VueJS如何在項目列表中顯示/隱藏最近的隱藏元素

Question

如何通過單擊vue中的按鈕來顯示/隱藏最近的 div ？

假設我有一個項目列表，每個項目都有一些隱藏的細節

<ul>
   <li v-for="item in items" :key="item.id">
     <div>
         <p>{{item.text}}</p>
         <button @click="showDetails(item)">Show details</div>
         <div class="details" :class="isVisible ? activeClass : 'hidden'">Some hidden details</div>
     </div>
   </li>
</ul>

然后我做

data() {
   return {
      items: [ // a bunch of item objects here]
      isVisible: false,
      activeClass: 'is-visible'
  }
},
methods: {
   showDetails(item) {
       this.isVisible = item;
   }
}

現在，當我單擊“showDetails”按鈕時，所有帶有 class .details的 div 都會打開並獲得 .is .is-visible -class，但我只想顯示最接近該項目的 div。 出於某種原因，我認為這很簡單，但我無法讓它工作。

我怎樣才能做到這一點？

Answer 1

為列表項創建一個包含所有邏輯本身的新組件會更清晰。 就像是：

// ListItem.vue
<template>
     <div>
         <p>{{text}}</p>
         <button @click="toggleVisibility">Show details</button>
         <div class="details" v-show="isVisible">Some hidden details</div>
     </div>
</template>

<script>
props: {
    text: String
},
data() {
    return {
      isVisible: false
  }
},
methods: {
  toggleVisibility() {
    this.isVisible = !this.isVisible
  }
}

</script>

並在您的父組件中：

<ul>
   <li v-for="item in items" :text="item.text" :key="item.id" is="list-item" /></li>
</ul>




data() {
   return {
      items: [ // a bunch of item objects here]
  }
}

Answer 2

只需將“isVisible”變量存儲在“項目”中

<ul>
   <li v-for="item in items" :key="item.id">
     <div>
         <p>{{item.text}}</p>
         <button @click="showDetails(item)">Show details</div>
         <div class="details" :class="item.isVisible ? activeClass : 'hidden'">Some hidden details</div>
     </div>
   </li>
</ul>




data() {
   return {
      items: [ // a bunch of item objects here]
      isVisible: false,
      activeClass: 'is-visible'
  }
},
methods: {
   showDetails(item) {
       item.isVisible = !item.isVisible;
       this.$forceUpdate();
   }
}

Answer 3

嘗試這個

 <template> <ul> <li v-for="(item, i) in items":key="item.id"> <div> <p>{{item.text}}</p> <button @click="showDetails(i)">Show details</button> <div class="details":class="i == active? activeClass: 'hidden'">Some hidden details</div> </div> </li> </ul> </template> <script> export default { data() { return { items: [], activeClass: 'is-visible', active: null }; }, methods: { showDetails(i) { this.active = i; } } }; </script>