Vue.js で配列をもとに反復リストアイテムを表示する

※ これは 2020/01/07 時点の node.js v13.2.0 vue/cli v4.1.1 の情報です

最新版では動作が異なる可能性がありますのでご注意ください

今回は配列を ViewModel にして複数のリストアイテムを動的に表示する方法を試してみます

前回いじってたサンプルを今回も改変してお試し

App.vue ファイルを下記のように修正しました

<template>
  <ul>
    <li v-for="(item, index) in items" v-bind:key="index">
      {{ index + 1 }} : {{ item.name }}
    </li>
  </ul>
</template>

<script lang="ts">
export default {
  data: function() {
    return {
      items: [
        { name: "先鋒" },
        { name: "前衛" },
        { name: "狙撃" },
        { name: "重装" },
        { name: "医療" },
        { name: "補助" },
        { name: "術師" },
        { name: "特殊" },
      ]
    };
  }
};
</script>