v-forとは
Vueでリストレンダリングを行うためのディレクティブ。
めっちゃ簡単に言うと
HTML内のループスイッチ
ちゃんと言うと
「データを繰り返す」のではなく、「データをもとにHTMLを繰り返し生成する」ディレクティブ
開発者がHTMLを1つ書くだけで、Vueが配列やオブジェクトの要素数に応じて
同じHTMLを繰り返し生成してくれます。
Laravelで言うと
@foreach ($cocktails as $cocktail)
と同じような役割だと考えるとイメージしやすいです。
こんなことに使われる
| 使用例 | データ例 | 生成されるもの |
|---|---|---|
| 一覧表示（最も基本） | カクテル一覧、ユーザー一覧 | <li> |
| テーブル表示 | 商品一覧、会員一覧 | <tr> |
| セレクトボックス | 都道府県一覧 | <option> |
| チェックボックス一覧 | 趣味一覧、タグ一覧 | <input type="checkbox"> |
| ラジオボタン一覧 | 性別、支払い方法 | <input type="radio"> |
| カード一覧 | 商品、記事 | <div class="card"> |
| ナビゲーションメニュー | メニュー一覧 | <li><a></a></li> |
| 画像ギャラリー | 画像URLの配列 | <img> |
| ボタン一覧 | ページ番号、カテゴリ | <button> |
| オブジェクトのプロパティ表示 | ユーザー情報 |
<p> など |
v-forの基本構文
v-for="各要素を格納する変数 in ループ対象"
<li v-for="cocktailName in cocktailList">
cocktailList：ループ対象（配列）
cocktailName：1件ずつ取り出した値
みたいな感じ
v-for使用時のルール
| ルール | 内容 |
|---|---|
| 配列・オブジェクトに使う | 配列やオブジェクトを繰り返し表示するために使う |
key を付ける |
Vueが各要素を識別し、効率よく更新するため |
key は一意な値にする |
同じ値があるとVueが正しく判別できない場合がある |
(値, index) と書くとインデックスも取得できる |
index に0から始まる添字が入る |
v-if と同じ要素に書かない |
可読性や挙動が分かりにくくなるため |
実際にコードを見ながら理解しよう
今回は、カクテル名の一覧を画面に表示するプログラムを例にします。
処理の流れ
① カクテル名の配列を作成
↓
② ref()でリアクティブなデータにする
↓
③ templateでv-forを使って1件ずつ取り出す
↓
④ Vueが<li>を必要な数だけ生成する
↓
⑤ 画面に一覧表示される
サンプルコード
<script setup lang="ts">
// リアクティブなデータを作るためにrefを読み込む
import { ref } from "vue";
// 初期表示するカクテル一覧
const cocktailList = ref([
"ホワイトレディ",
"ブルーハワイ",
"モスコミュール"
]);
</script>
<template>
<!-- 配列の要素数だけ<li>を生成する -->
<ul>
<li
v-for="cocktailName in cocktailList"
:key="cocktailName"
>
<!-- 現在取り出しているカクテル名を表示 -->
{{ cocktailName }}
</li>
</ul>
</template>
コードを分解して理解
① 配列を作成する
const cocktailListInit: string[] = [
"ホワイトレディ",
"ブルーハワイ",
"モスコミュール"
];
今回は3件のデータを持つ配列を作成
② ref()でリアクティブにする
const cocktailList = ref(cocktailListInit);
ref() を使うことで、Vueがデータの変更を監視(リアクティブ)
できるようになります。
リアクティブとは
データが変わると、それに応じて画面も自動で更新される仕組みのこと
③ v-forで配列を1件ずつ取り出す
<li v-for="cocktailName in cocktailList">
| 回数 | cocktailName |
|---|---|
| 1回目 | ホワイトレディ |
| 2回目 | ブルーハワイ |
| 3回目 | モスコミュール |
中でこんな感じに動きます。
取り出すたびに、Vueが <li> を1つ生成しています。
④ keyを付ける
:key="cocktailName"
key はVueが各要素を識別するためのIDです。
今回のようにカクテル名が重複しない場合は名前を使って問題ありません。
ただし、同じ名前が存在する可能性がある場合は、
IDなどの一意な値を指定する必要があるので注意です。
⑤ インデックスを取得する
v-for="(cocktailName, index) in cocktailList"
index を追加すると、何番目の要素なのかも取得できます。
| cocktailName | index |
|---|---|
| ホワイトレディ | 0 |
| ブルーハワイ | 1 |
| モスコミュール | 2 |
画面ではこんな感じに表示される
まとめ
-
v-forはリストレンダリングを行うためのディレクティブ - 配列やオブジェクトをもとに、VueがHTMLを繰り返し生成する
-
keyは必ず指定し、一意な値を設定する -
(値, index)と書くことでインデックスも取得できる -
v-ifと同じ要素に書かない