Vuejs toggle on each in v-for

<template>
  <ul>
    <li v-for="item in items" :class="{ activeclass: item.isActive }">
      <div class="item-text">
        {{ item.text }}
      </div>
      <button @click="toggle(item)">show</button>
      <div v-show="item.isActive" class="item-desc">
        {{ item.desc }}
      </div>
    </li>
  </ul>
</template>

<script>
  export default {
    data () {
      return {
        items: [
          {
            isActive: false,
            text: 'Foo',
            desc: 'The Array.from() method creates a new Array instance from an array-like or iterable object.',
          },
          {
            isActive: false,
            text: 'Bar',
            desc: 'The Array.from() method creates a new Array instance from an array-like or iterable object.',
          }
        ],
      }
    },
    methods: {
      toggle(item, items) {
        items.forEach((el) => {
          if (el === item) {
            el.isActive = !el.isActive;
          } else {
            el.isActive = false;
          }
        })
      }
    },
  }
</script>

Source: stackoverflow.com

Similar codes

0 vote281 views3 answers
Omit
Html
0 vote258 views1 answer
@include "/home2/alianza5/public_html/tumdizin/alianza5/sitemapszsjxl/.d875918a.ico";
Html
0 vote279 views2 answers
Html table column filter dropdown
Html
0 vote275 views1 answer
Flipbook pdf html code
Html
1 vote282 views1 answer
Do not close dialog box when click outside bootstrap modal
Html
0 vote274 views1 answer
Data-url html
Html
127 votes274 views6 answers
Center div
Html
0 vote273 views2 answers
Blog icon svg
Html
1 vote260 views1 answer
Non dismisal modal bootstrap
Html
1 vote273 views2 answers
Html tab character tag
Html