v-for merender senarai elemen dengan mengulangi array (atau objek/julat). Anda harus selalu memasangkannya dengan :key yang unik supaya Vue dapat menjejaki item dengan cekap.
<script setup>
import { ref } from "vue";
const items = ref([{ id: 1, name: "Apple" }, { id: 2, name: "Banana" }]);
</script>
<template>
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
</template>
<template>
<li v-for="(item, index) in items" :key="item.id">{{ index }}: {{ item.name }}</li>
<li v-for="(value, key) in myObject" :key="key">{{ key }}: {{ value }}</li>
<span v-for="n in 5" :key="n">{{ n }}</span> <!-- range 1..5 -->
</template>
Vue menggunakan key untuk mengenal item mana yang berubah, ditambah, atau dibuang, supaya ia dapat menggunakan semula dan menyusun semula nod DOM sedia ada daripada membinanya semula. Tanpa key yang stabil, Vue kembali kepada strategi "in-place patch" yang boleh menyebabkan pepijat:
<!-- ❌ using index as key → wrong when the list reorders/filters -->
<li v-for="(item, i) in items" :key="i">
<input /> <!-- input state can attach to the WRONG item after reordering -->
</li>
<!-- ✅ stable unique id → Vue tracks each item correctly -->
<li v-for="item in items" :key="item.id">...</li>
Menggunakan indeks array sebagai key adalah kesalahan biasa — apabila item disusun semula, dimasukkan, atau dipadamkan, keadaan komponen/DOM (seperti nilai input atau keadaan checkbox) boleh kekal pada baris yang salah.
<!-- ❌ avoid — ambiguous precedence -->
<li v-for="x in items" v-if="x.active">...</li>
<!-- ✅ filter in a computed, or wrap with <template v-for> -->
v-for ialah cara anda merender senarai dinamik.
:key bukanlah pilihan dalam amalan: key yang stabil dan unik membenarkan Vue DOM maya beza dengan cekap dan mengelakkan pepijat ketidakpadanan keadaan yang halus pada susunan semula/penapis.
Mengetahui cara menggunakan id sebenar (tidak pernah indeks untuk senarai dinamik) dan memisahkan v-for/v-if adalah penting untuk senarai yang betul dan berprestasi.