[Vuejs]-VueJS How to show/hide closest hidden element in list of items

by

2👍

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>
👤Mamadou Hady Barry

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]
  }
}
👤Elijah Ellanski

0👍

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();
   }
}
👤SteepZero

Leave a comment