過去バージョン

v-for の基本

Vue.js の v-for ディレクティブは、配列やオブジェクトなどの反復可能なデータを使って DOM 要素を繰り返し描画します。Vue 2 / Vue 3 ともに最も使用頻度の高いディレクティブの一つです。

<template>
  <ul>
    <li v-for="fruit in fruits" :key="fruit">{{ fruit }}</li>
  </ul>
</template>

<script setup>
const fruits = ['Apple', 'Banana', 'Cherry'];
</script>

レンダリング結果:

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>

インデックスを取得

<ul>
  <li v-for="(fruit, index) in fruits" :key="index">
    {{ index }}: {{ fruit }}
  </li>
</ul>

<!--
0: Apple
1: Banana
2: Cherry
-->

オブジェクトの反復

<script setup>
const user = {
  name: 'Alice',
  age: 30,
  job: 'Developer',
};
</script>

<template>
  <!-- 値のみ -->
  <ul>
    <li v-for="value in user">{{ value }}</li>
  </ul>

  <!-- 値, キー -->
  <ul>
    <li v-for="(value, key) in user">{{ key }}: {{ value }}</li>
  </ul>

  <!-- 値, キー, インデックス -->
  <ul>
    <li v-for="(value, key, index) in user" :key="key">
      [{{ index }}] {{ key }} = {{ value }}
    </li>
  </ul>
</template>

数値範囲・文字列の反復

<!-- 1〜10 -->
<span v-for="n in 10" :key="n">{{ n }} </span>
<!-- 1 2 3 4 5 6 7 8 9 10 -->

<!-- 文字列の各文字 -->
<span v-for="ch in 'Hello'" :key="ch">{{ ch }}.</span>
<!-- H. e. l. l. o. -->

:key の重要性

Vue は :key を使ってリスト内の各要素を識別します。これがないと「リスト要素が並び替わったとき」「真ん中に挿入されたとき」に Vue が DOM 再利用に失敗し、入力欄の値がズレる・アニメーションが破綻するといった問題が起きます。

<!-- ❌ 不適: 配列インデックスを key にすると、insert/delete で挙動が崩れる -->
<li v-for="(item, idx) in items" :key="idx">

<!-- ✅ 正解: 一意な ID を使う -->
<li v-for="item in items" :key="item.id">

<!-- ✅ 文字列リストで ID が無いなら値自身でも OK (重複しない前提) -->
<li v-for="tag in tags" :key="tag">

v-for と v-if の組み合わせ警告

同一要素で v-for と v-if を使うのは非推奨です。Vue 3 では v-if が優先され、v-for で展開された個別要素を見ないため意図しない挙動になります。

<!-- ❌ NG: 同一要素 -->
<li v-for="todo in todos" v-if="!todo.done" :key="todo.id">
  {{ todo.text }}
</li>

<!-- ✅ template でラップ (Vue 3) -->
<template v-for="todo in todos" :key="todo.id">
  <li v-if="!todo.done">{{ todo.text }}</li>
</template>

<!-- ✅ computed でフィルタ (推奨) -->
<li v-for="todo in activeTodos" :key="todo.id">{{ todo.text }}</li>

<script setup>
import { computed } from 'vue';
const todos = ref([...]);
const activeTodos = computed(() => todos.value.filter(t => !t.done));
</script>

ネストした v-for

<script setup>
const categories = [
  { name: 'Fruit',  items: ['Apple', 'Banana'] },
  { name: 'Vegetable', items: ['Carrot', 'Potato'] },
];
</script>

<template>
  <div v-for="cat in categories" :key="cat.name">
    <h3>{{ cat.name }}</h3>
    <ul>
      <li v-for="item in cat.items" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

複数要素をラップ (