【Vue.js】v-forの使い方まとめ

【Vue.js】v-forの使い方まとめ

v-forの基本的な使い方

指定した回数ループさせる

素のJavaScriptも含め、他の言語と比べると超シンプルです。
シンプルすぎて逆に一瞬戸惑うレベル。

See the Pen qLYVLa by 匠 (@dilphinrokujiro) on CodePen.

配列を展開する

こちらも、かなりシンプルですね。
配列の要素を1つずつ取り出しながら表示しています。

See the Pen jXxYNo by 匠 (@dilphinrokujiro) on CodePen.

オブジェクトを展開する

オブジェクトも普通の配列と同じように展開できます。

See the Pen GPdyJG by 匠 (@dilphinrokujiro) on CodePen.

v-forの応用的な使い方

keyを取得する

第二引数を指定すると、オブジェクトのkeyも取得できます。

See the Pen JwvMKN by 匠 (@dilphinrokujiro) on CodePen.

オブジェクトの配列を展開する

オブジェクトの配列を展開する場合は、以下のようになります。

See the Pen QzrQPO by 匠 (@dilphinrokujiro) on CodePen.

ループしながらループした回数を取得する

以下の通り、第二引数を指定するとインデックスが取得できるので、
何回ループしたか、ループしている最中に把握できます。(これ意外と便利)

See the Pen wRjprb by 匠 (@dilphinrokujiro) on CodePen.

ループをネストする

オブジェクトの配列を展開し、オブジェクトの中にある配列も展開したい。というような場合、以下のようにしてループをネストすることができます。

See the Pen maLpav by 匠 (@dilphinrokujiro) on CodePen.

けっこう単純ですね。

v-forの注意点

v-forにはkeyを必ず指定する

v-forディレクティブを使用する場合、key属性を必ず指定する必要があるようです。
しかし、指定してはいけないパターンもあるようです。(どういうこっちゃ)

詳しくは別の記事にまとめています。

【Vue.js】v-forにkey属性を指定すべき理由と、指定してはいけないパターン

v-forとv-ifを一緒に使わない

公式サイトのスタイルガイドによると、v-forとv-ifは一緒に使うのを避けるべきとのことです。

理由としては、パフォーマンスが悪くなるからです。
v-forで展開された変数をv-ifで評価しようとすると、レンダリングされるたびに配列をすべて繰り返し処理してしまうからです。
配列を必要以上に繰り返し処理するのは、潜在的なバグの温床になってしまう可能性があります。
処理するデータがせいぜい数十件だから、と甘く見ずにキチンと効率良く処理しておくべきでしょう。

もし、v-forとv-ifを同時に使う必要が出てきた場合は、上記のスタイルガイドを参考に、算出プロパティなどでv-forで展開する配列をあらかじめフィルタリングする方法を考えてみましょう。

参考文献