Vueの配列表示：v-for と key でリストUIを作る – 10/12

Vueの一覧表示は v-for が基本です。keyの意味と、フィルタ表示の考え方も押さえます。

v-forで表示する

<script setup>
const items = ["Apple", "Orange", "Banana"]
</script>

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

オブジェクト配列の表示

<script setup>
const users = [
  { id: 1, name: "Taro" },
  { id: 2, name: "Hanako" },
]
</script>

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

フィルタして表示する

検索キーワードで絞る例です。

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

const keyword = ref("")
const users = ref([
  { id: 1, name: "Taro" },
  { id: 2, name: "Hanako" },
])

const visible = computed(() =>
  users.value.filter((u) => u.name.includes(keyword.value))
)
</script>

<template>
  <input v-model="keyword" placeholder="検索" />
  <ul>
    <li v-for="u in visible" :key="u.id">{{ u.name }}</li>
  </ul>
</template>

Vueでは computed が頻出です。依存する値が変わったときだけ再計算されます。

練習問題

1. ユーザーを3人に増やして表示してみましょう。
2. 検索キーワードでフィルタして表示してみましょう。
3. keyを付ける理由を説明してみましょう。