VueJS如何在项目列表中显示/隐藏最近的隐藏元素

Question

How can I show/hide the closest div by clicking a button in vue ?

lets say I have a list of items, each with some hidden details

<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>

Then I do

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

Right now, when I click on on of the "showDetails" buttons, all divs with class .details opens and get the .is-visible -class, but I just want the closest div to the item to be displayed. For some reason I think this is pretty simple, but I can't make it work.

How can I achieve that?

Answer 1

It would be clearer to create a new component for list item which would contain all logic itself. Something like:

// 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>

and in your parent component:

<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

Just store "isVisible" variable inside the "item"

<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

try this

 <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>