タイトル: for 繰り返し処理
SEOタイトル: Vue.js v-for 繰り返し処理完全ガイド
| この記事の要点 |
|
v-for の基本
Vue.js の v-for ディレクティブは、配列やオブジェクトなどの反復可能なデータを使って DOM 要素を繰り返し描画します。Vue 2 / Vue 3 ともに最も使用頻度の高いディレクティブの一つです。
- {{ fruit }}
レンダリング結果:
- Apple
- Banana
- Cherry
インデックスを取得
-
{{ index }}: {{ fruit }}
オブジェクトの反復
- {{ value }}
- {{ key }}: {{ value }}
-
[{{ index }}] {{ key }} = {{ value }}
数値範囲・文字列の反復
{{ n }}
{{ ch }}.
:key の重要性
Vue は :key を使ってリスト内の各要素を識別します。これがないと「リスト要素が並び替わったとき」「真ん中に挿入されたとき」に Vue が DOM 再利用に失敗し、入力欄の値がズレる・アニメーションが破綻するといった問題が起きます。
v-for と v-if の組み合わせ警告
同一要素で v-for と v-if を使うのは非推奨です。Vue 3 では v-if が優先され、v-for で展開された個別要素を見ないため意図しない挙動になります。
{{ todo.text }}
{{ todo.text }}
{{ todo.text }}
ネストした v-for
{{ cat.name }}
- {{ item }}
複数要素をラップ ()
1 つの v-for で複数のタグを出力したい場合は を使います (template タグは DOM に出力されません):
- {{ user.name }}
- {{ user.email }}
computed でフィルタ・ソート
Sorted by age
- {{ u.name }} ({{ u.age }})
配列を computed の中でコピー ([...arr]) してから sort することで、reactive の元配列を破壊しません。
Vue 2 と Vue 3 の v-for の違い
| 項目 | Vue 2 | Vue 3 |
|---|---|---|
| v-for と v-if の優先度 | v-for が優先 | v-if が優先 |
| :key の必須度 | 推奨 | 必須 (デフォルト警告) |
| $index, $key (暗黙変数) | 非推奨 | 削除 |
| v-bind スコープ | 親と同じ | 反復子も参照可 |
非破壊的に配列を変更
Vue 2 の頃は Vue.set() や this.$set が必要なケースがありましたが、Vue 3 は Proxy ベースで配列のあらゆる変更を検知します:
import { ref } from 'vue';
const items = ref([1, 2, 3]);
// すべて自動でリアクティブ
items.value.push(4);
items.value.pop();
items.value.splice(1, 0, 99);
items.value[0] = 100; // ← Vue 3 では検知される
items.value.sort();
items.value = items.value.filter(x => x > 1);FAQ
Q: :key にオブジェクトを渡しても良いですか
A: ダメです。プリミティブ (文字列/数値) を渡してください。オブジェクトはハッシュキーが一意でなく Warning が出ます。
Q: v-for をパフォーマンス上の理由で避けたい
A: 仮想スクロール (vue-virtual-scroller) を使うと、1 万件でも 50 件分だけ描画するので高速です。
Q: Vue 2 の this.$set(this.items, idx, val) はもう不要
A: Vue 3 では完全に不要です。直接代入で OK。