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>
