Vueの配列の要素を指定する方法

auです。

Vueを使った際に、配列の中身を表示して、どれをクリックしてるのか分からないと実装できないなと言うことで、実装してみました。

環境

vue@2.6.11
npm 6.14.4

実装してみる

    <ul class="list-group">
      <li
        class="list-group-item"
        @click="paneItemClick($event, paneItem)"
        v-for="paneItem in paneItems"
        :key="paneItem.id"
      >
        {{ paneItem.page }}
      </li>
    </ul>

export default {
  data () {
    return {
            paneItems: [ 
        { id: 1, page: 'Test1' },
        { id: 2, page: 'Test2' }
      ],
    }
  },
  methods: {
    paneItemClick (event, item) {
       alert(item.page)   
    }
  }
}

これで、クリックしたらその名前が表示されるようになりました。基本中の基本ですが、バージョンの違いなどで書き方が若干違うサイトもあるので注意が必要ですね。