How to trigger an element visibility only for the clicked item in a v-for loop?

Question

How do I make each button inside of each element to only trigger the hidden menu of the clicked item, instead of all of them?

<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
  }
}

Codepen: https://codepen.io/anon/pen/wmjKXB?editors=1010

What would be the best way to do it? I've been looking for an answer but couldn't find anything.

Answer 1

Use an array of objects and toggle each using the arrays index corresponding to the button.

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

Here's a simple example