サンプルコードから基礎を学ぶ！Vue.js入門講座！【v-for編】

今回はこのような質問をいただきました。

v-forの使い方がわからない…v-forってどうやって使うんだっけ？

今回はリストレンダリング(v-for)について解説していきます。

超初心者向けVue.js入門講座です。

一緒にVue.jsを勉強して、Vue.jsを楽しみましょう！

v-forを使ってリストレンダリング！

v-forはリストレンダリングを行うためのものです。

こちらはfor文をイメージしていただければわかりやすいと思います。

配列をループさせて処理するイメージです。

では実際にサンプルコードを見てみましょう。

for-in構文と同じですね。

このように、配列をレンダリングするために使用するのがv-forになります。

インデックスも取得できる！

v-forはインデックス（順番）を取得することもできます。

2つ目の引数がインデックスとなっています。

では実際にインデックスを取得してみます。

それほど難しくないですね。

こちらの取得は任意なので必要であれば取得してください！

オブジェクトにも使える！

v-forは配列だけでなくオブジェクトにも使用できます。

基本的には配列の場合とほとんど同じです。

オブジェクトの場合、第2引数はキーとなります。

そしてインデックスは第3引数になります。

整数値にも使える！

v-forは整数値にも使えます。

この要素を5回ループさせたい！

みたいなときありますよね。

このようなときに整数値を使用します。

配列のときとほとんど同じなので問題ないと思います。

このように指定した数値だけループさせることも可能です。

重要！v-forを使用するときは必ずkey属性を指定しよう！

まずはこちらのサンプルを動かしてみてください。

すべてのテキストボックスに違う文字列を入れた後にボタンを押すと…何かおかしいですよね。

そうなんです、削除したときにテキストボックスの値が残ってしまっています。

このような挙動になる原因は、v-forの特徴にあります。

実はv-forには

といった特徴があります。

そのため、要素の移動を最小限に抑え、可能な限り要素を再利用した結果、このような挙動になったのです。

ではこの現象を回避するためにはどうしたら良いのか、そこで出てくるのがkey属性です。

key属性を指定してみました。

想定通りの挙動になりましたね。

このような思わぬバグを生まないように、v-forを使用するときは必ずkey属性を指定しましょう。

複数の要素に対して使いたいときはtemplateタグを使う！

HTML5にはtemplateタグというものが存在します。

こちらを使用することでv-forで複数の要素を扱うことができます。

まずは実際に見てみましょう。

デベロッパーツールを使用してElementsを見てもらえればわかるのですが、templateタグは全く表示されません。

要素をグループ化させるためだけに存在しています。

このようにtemplateタグを使用してグループ化することで、表示に影響を与えずにv-forを複数の要素に適用できます。

複数の要素にv-forを適用させたいときはtemplateタグを使用しましょう！

まとめ

• リストレンダリング
  • v-forは配列、オブジェクト、整数値に使える
  • v-forを使用するときは必ずkey属性を指定する
• 複数の要素にv-forを適用させたいときはtemplateタグを使う

ぜひv-forを使ってみてください！