vuejs toggle on each in v for

1<template>
2  <ul>
3    <li v-for="item in items" :class="{ activeclass: item.isActive }">
4      <div class="item-text">
5        {{ item.text }}
6      </div>
7      <button @click="toggle(item)">show</button>
8      <div v-show="item.isActive" class="item-desc">
9        {{ item.desc }}
10      </div>
11    </li>
12  </ul>
13</template>
14
15<script>
16  export default {
17    data () {
18      return {
19        items: [
20          {
21            isActive: false,
22            text: 'Foo',
23            desc: 'The Array.from() method creates a new Array instance from an array-like or iterable object.',
24          },
25          {
26            isActive: false,
27            text: 'Bar',
28            desc: 'The Array.from() method creates a new Array instance from an array-like or iterable object.',
29          }
30        ],
31      }
32    },
33    methods: {
34      toggle(item, items) {
35        items.forEach((el) => {
36          if (el === item) {
37            el.isActive = !el.isActive;
38          } else {
39            el.isActive = false;
40          }
41        })
42      }
43    },
44  }
45</script>
46