【Vue.js】v-forで配列やオブジェクトの各要素をループして表示する方法

<script setup>
import { ref } from 'vue'

const items = ref([
  { id: 1, text: 'Learn Vue.js' },
  { id: 2, text: 'Build a project' },
  { id: 3, text: 'Master Vue.js' }
])
</script>

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.text }}
    </li>
  </ul>
</template>

<template>
  <!-- (要素, インデックス) の順 -->
  <li v-for="(item, index) in items" :key="item.id">
    {{ index }}: {{ item.text }}
  </li>

  <!-- 分割代入も使える。in の代わりに of でもよい -->
  <li v-for="{ id, text } of items" :key="id">{{ text }}</li>
</template>

<script setup>
import { reactive } from 'vue'

const user = reactive({ name: '田中', age: 30, city: '東京' })
</script>

<template>
  <!-- 値だけ表示する（keyにはキー名を使う） -->
  <li v-for="(value, key) in user" :key="key">{{ value }}</li>

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

<template>
  <!-- 1から10までの数が出る（0始まりではない） -->
  <span v-for="n in 10" :key="n">{{ n }}</span>
</template>

<script setup>
const table = [
  { id: 'r1', cells: [{ id: 'a', v: 1 }, { id: 'b', v: 2 }] },
  { id: 'r2', cells: [{ id: 'c', v: 3 }, { id: 'd', v: 4 }] }
]
</script>

<template>
  <div v-for="row in table" :key="row.id">
    <span v-for="cell in row.cells" :key="cell.id">{{ cell.v }}</span>
  </div>
</template>

<ul>
  <!-- template を使うと、1回の繰り返しで複数の要素を出せる -->
  <!-- key は template 側に付ける -->
  <template v-for="item in items" :key="item.id">
    <li>{{ item.text }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

<script setup>
import { ref } from 'vue'

const list = ref([
  { id: 1, text: 'A' },
  { id: 2, text: 'B' },
  { id: 3, text: 'C' }
])

function addFirst() {
  list.value.unshift({ id: Date.now(), text: '新しい項目' })
}
</script>

<template>
  <button @click="addFirst">先頭に追加</button>

  <!-- NG：index を key にすると、並びが変わったときに入力欄の中身などがずれる -->
  <div v-for="(item, index) in list" :key="index">
    {{ item.text }} <input type="text">
  </div>

  <!-- OK：データごとに固有の id を key にする -->
  <div v-for="item in list" :key="item.id">
    {{ item.text }} <input type="text">
  </div>
</template>

<!-- NG：同じ要素に v-for と v-if を書く
     Vue 3 では v-if が先に評価されるため、todo が未定義というエラーになる -->
<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo.name }}
</li>

<!-- OK①：template で囲み、中の要素に v-if を付ける -->
<template v-for="todo in todos" :key="todo.id">
  <li v-if="!todo.isComplete">{{ todo.name }}</li>
</template>

<script setup>
import { ref, computed } from 'vue'

const todos = ref([
  { id: 1, name: '買い物', isComplete: false },
  { id: 2, name: '掃除', isComplete: true }
])

// OK②：computed で先に絞り込む（こちらがおすすめ）
const activeTodos = computed(() => todos.value.filter(t => !t.isComplete))
</script>

<template>
  <ul>
    <li v-for="todo in activeTodos" :key="todo.id">{{ todo.name }}</li>
  </ul>
</template>

<!-- コンポーネントはスコープが独立しているので、データは props で渡す -->
<TodoItem
  v-for="(todo, index) in todos"
  :todo="todo"
  :index="index"
  :key="todo.id"
/>

<script setup>
import { ref } from 'vue'

const items = ref([{ id: 1, text: 'A' }, { id: 2, text: 'B' }])

// 元の配列を変更するメソッド（push・pop・shift・unshift・splice・sort・reverse）は
// そのまま画面に反映される
items.value.push({ id: 3, text: 'C' })

// 元の配列を変更しないメソッド（filter など）は、結果で置き換える
items.value = items.value.filter(item => item.id !== 2)
</script>