v-for 루프에서 클릭한 항목에 대해서만 요소 가시성을 트리거하는 방법

v-for 루프에서 클릭한 항목에 대해서만 요소 가시성을 트리거하는 방법

각 요소 내부의 각 버튼이 클릭된 항목의 숨겨진 메뉴만 트리거하도록 하려면 어떻게 해야 합니까?

<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

어떻게 하면 좋을까요?답을 찾고 있었는데 아무것도 못 찾았어요.

객체 배열을 사용하고 버튼에 대응하는 배열 인덱스를 사용하여 각 객체를 전환합니다.

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

여기 간단한 예가 있습니다.

언급URL : https://stackoverflow.com/questions/49589157/how-to-trigger-an-element-visibility-only-for-the-clicked-item-in-a-v-for-loop