Vueを使っている際に、配列やオブジェクト(連想配列)を繰り返して表示するリストレンダリングをする場合があります。そのような場面で便利なVueのv-forディレクティブについて解説します。

Vueのv-forディレクティブとは？

Vueでアプリケーション作成をする際に配列型データやJSON形式のそれぞれの要素に対して同じ見た目で表示させたい。という場面があったりすると思います。そんな時に使えるのがVueのv-forディレクティブです。例えばタスク管理アプリでのタスク一覧画面などでは配列形式で保存されている複数のタスクリストのデータの一つ一つを連続して表示させる…などの場面で使用します。

v-forディレクティブを用いれば配列データを構文に組み込むだけでこれらを実現してくれます。

Vueのv-forディレクティブの使い方

それでは実際のv-forディレクティブの書き方について説明していきます

Vueのv-forディレクティブの書き方

v-forディレクティブは次のように書きます。

(app.js)

new Vue({
 el: "#app",
 data: {
(普通の配列の場合)
  配列名: [
     配列の要素（数字、文字、配列）
   ]
(連想配列の場合)
  連想配列名 :{
　　　Key属性:連想配列の要素(数字、文字列）
   }

 },
 template: `
 <div>
   <ul v-for="配列の要素一つ in 配列名">
     <li>{{ 配列の要素一つ }}</li>
   </ul>
 </div>
 `
})

Vueのv-forディレクティブの実装例

1から10まで数えあげる(1 to 10)の実装を紹介します。

Number型の要素を持つ配列numbersの数字のそれぞれを表示してみましょう。Vueインスタンスのdataでnumbersを定義し、1から10の整数を格納させます。

(app.js)

new Vue({
  el: "#app",
  data: {
    numbers: [
      1, 2, 3, 4, 5, 6, 7, 8, 9, 10
    ]
  },
  template: `
  <div>
    <ul>
      <li v-for="num in numbers">{{ num }}</li>
    </ul>
  </div>
  `
 })

(index.html)

<div id="app"></div>

このようにv-forを用いてnumbersの各要素を仮変数（エイリアス）numとして取り出して、numをli要素の内部に入れて表示させることができます。実際の表示を次で確認してみましょう。

（実際の表示）

 第二引数で配列のインデックスを取得する

Vueのv-forディレクティブでは第二引数として配列のインデックスを受け取ることができます。次のように第二引数を受け取ることで配列のインデックスがそれぞれの要素とともに利用できます

(app.js)

new Vue({
 el: "#app",
 data: {
   numbers: [
     0, 1, 2, 3, 4, 5, 6, 7, 8, 9
   ]
 },
 template: `
 <div>
   <ul>
     <li v-for="(num, index) in numbers">       {{ index }} : {{ num * 2 }}     </li>
   </ul>
 </div>
 `
})

上のコードではindexという仮変数（エイリアス）でnumbers配列内のnum要素のインデックスが利用できます。出力結果は次のようになります。

（実際の表示）

Vueのv-forディレクティブを使う際の注意点

v-forディレクティブを用いる際にはいくつかの注意点があります。これらを満たしていない場合には正しく要素がレンダリングされない場合がありますので、チェックしておきましょう。

key属性を指定する

Vueではレンダリングされるリストの要素が変更された場合、どの要素が変化されたのかを追跡して検出できる仕組みになっています。この際に、各要素に対して一意の値を持ったkey属性を与えることを推奨しています。例えば、次のようにしてkey属性を与えます。(与える値には文字列や数値が推奨されています。)

※ただし、第3項で取り上げた配列のインデックスを用いると再描画されるたびにインデックスの番号も変化するため、使用することは推奨されません。(key属性を指定しない場合、インデックスがkey属性として用いられます。)

(app.js)

new Vue({
 el: "#app",
 data: {
   numbers: [
     {
       num: 0,
       id: "num_0"
     },
     {
       num: 1,
       id: "num_1"
     },
     {
       num: 2,
       id: "num_2"
     },
     {
       num: 3,
       id: "num_3"
     },
     {
       num: 4,
       id: "num_4"
     },
   ]
 },
 template: `
<div>
  <ul>
    <li v-for="(num, index) in numbers" v-bind:key = num.id>
      {{ index }} : {{ num.num * 2 }}
    </li>
  </ul>
</div>
`
})

全てのnum要素に対してidが代入されていることがわかりますね。今回のようなシンプルな要素のリストレンダリングについては必ずしもkey属性の指定が必要ではありませんが、要素内部に子コンポーネントなどが入り込む場合には必ずkey属性を指定しましょう。

サポートしていない配列操作

v-forディレクティブは配列の要素の変化を検出し再描画を行うことができますが、一部の配列操作については対応していません。それは次のような２パターンです。

• 配列の長さを変更するとき

this.items.length = newLength

• インデックスで配列の要素を直接変更するとき

this.items[indexOfItem] = newValue

上記のような場合には配列が変化しても変化にVueが検出できずv-forディレクティブを用いても再描画されないことに注意が必要です。

この記事のまとめ

本記事ではVueのv-forディレクティブを、実際の実装例を元に説明しました！最後に記事の要点をまとめてみましょう。

• 配列のリストレンダリングを行う際にはv-forディレクティブを用いる。
• v-forディレクティブでは第二引数として配列のインデックスも取得できる。
• v-forディレクティブでのレンダリングの際にはkey属性を指定してVueの変化の追跡を補助する。
• Vueが変化を検出できない配列操作に注意する。

Vueのv-forディレクティブを是非活用してみましょう！