object を持った配列に対して v-for を適用する

参考コード

  • v-for の対象を単なる配列ではなく、オブジェクトを持った配列にする
  • {{member.name}} といった形で使えばいい
  • こうすることで名前だけではなく、より複雑なデータ構造を持ったものをレンダリングすることができる
App.vue
<template>
  <div>
    <h2>{{title}}</h2>
    <div
      :key="member"
      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>