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

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

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

Vue.js のチュートリアル続行

今回は配列を 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>

export default の中身が App.vue のコードビハインド的な部分で、data: プロパティが ViewModel になるようです

data: プロパティは関数定義じゃないといけないみたい

<template> の部分は HTML になるところで v-for の属性は反復子です

data の items の配列をひとつずつ取り出して item に要素の値、index は 0 始まりの添字が入るようです

また、v-for を使う場合何かキー要素を指定する必要があるようで v-bind 属性で index をキーに指定しました

ちょっとまだおまじない的な部分が理解しきれていないですがこれで動くはず！

というわけで VSCode のターミナルを開いてコマンドをたたく！

npm run electron:serve

反復リストレンダリング

思い通りに表示されました！