key に一意 = 絶対に被らない値を与える

参考コード

  • v-for を使って要素を複数レンダリングする場合には :key が必須
  • key は必ず「一意 = 絶対に被らない値」を与える
  • 普通は id を使う
App.vue
<template>
  <div>
    <h2>{{title}}</h2>
    <div
      :key="member.id"
      v-for="member in members"
    >{{member.name}} / {{member.position}} #{{member.id}}</div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      title: "メンバーリスト",
      members: [
        { name: "中西", position: "ガード", id: 1 },
        { name: "佐々木", position: "フォワード", id: 2 },
        { name: "渡辺", position: "センター", id: 3 },
        { name: "城所", position: "パワーフォワード", id: 4 },
        { name: "荒瀬", position: "シューティングガード", id: 5 }
      ]
    };
  }
};
</script>

<style>
</style>