vue.js - 如何仅针对 v-for 循环中单击的项目触发元素可见性？

Question

如何让每个元素内的每个按钮只触发被点击项目的隐藏菜单，而不是所有的菜单？

<div v-for="(i, index) in 3">
  <v-btn @click="clicked = !clicked">Menu</v-btn>
  <p v-show="clicked">hidden menu</p>
</div>

...

data () {
  return {
    clicked: false
  }
}

代码笔: https://codepen.io/anon/pen/wmjKXB?editors=1010

最好的方法是什么？我一直在寻找答案，但一无所获。

Answer 1

使用对象数组并使用与按钮对应的数组索引切换每个对象。

new Vue({
  el: '#app',
     data () {
       return {
         clicked:[{ show:true}, { show:true}, { show:true}]
       }
     }
})

Here's a simple example