ループ: v-for

テンプレートでデータの数だけ繰り返し表示したい場合はv-for属性を使います。この属性は配列とオブジェクトどちらでも回すことができます。この属性はループをラップする要素ではなく、ループする(繰り返し出現するタグ)に付けなければいけません。

また値を回す時、そのルートタグにはv-bind:key:key)値の設定が必要です。

配列

値だけを回す、値とインデックスを回すの2つの方法があります。

配列の要素だけを回したい時はitem in arrayと置きます。inの右側に配列値を置き、左側に各値が入る変数名を置きます。

<ul>
  <li v-for="item in arr" :key="item">{{item}}</li>
</ul>

インデックスも一緒に回したい場合は左側を括弧で囲み第2引数のような形でインデックス値を受け取れます。

<ul>
  <li v-for="(item, index) in arr" :key="item">{{item}}</li>
</ul>

オブジェクト

こちらは

  • 値だけ
  • 値とキー
  • 値とキーとインデックス

3つの方法がありますが、大体は配列と同じです。1つの場合は直に、複数の場合は括弧で囲んで値を受け取ります。

値だけ

<ul>
  <li v-for="value in obj" :key="value">{{value}}</li>
</ul>

値とキーとインデックス

<ul>
  <li v-for="(value, key, index) in obj" :key="key">{{key}} {{value}} {{index}}</li>
</ul>