v-for render một danh sách phần tử bằng cách lặp qua một mảng (hoặc object/dải số). Bạn nên luôn ghép nó với một :key duy nhất để Vue có thể theo dõi các item một cách hiệu quả.
<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> <!-- dải số 1..5 -->
</template>
Vue dùng key để xác định item nào đã thay đổi, được thêm vào, hoặc bị xóa, nên nó có thể tái sử dụng và sắp xếp lại các node DOM hiện có thay vì dựng lại chúng. Nếu không có key ổn định, Vue rơi về chiến lược "in-place patch" có thể gây lỗi:
<!-- ❌ dùng index làm key → sai khi danh sách sắp xếp lại/lọc -->
<li v-for="(item, i) in items" :key="i">
<input /> <!-- state của input có thể gắn vào SAI item sau khi sắp xếp lại -->
</li>
<!-- ✅ id duy nhất ổn định → Vue theo dõi từng item chính xác -->
<li v-for="item in items" :key="item.id">...</li>
Dùng index của mảng làm key là một lỗi phổ biến — khi item được sắp xếp lại, chèn vào, hoặc xóa đi, state của component/DOM (như giá trị input hoặc trạng thái checkbox) có thể dính vào sai hàng.
<!-- ❌ tránh — thứ tự ưu tiên không rõ ràng -->
<li v-for="x in items" v-if="x.active">...</li>
<!-- ✅ lọc trong một computed, hoặc bọc bằng <template v-for> -->
v-for là cách bạn render danh sách động. :key thực tế không phải tùy chọn: một key duy nhất, ổn định cho phép virtual DOM của Vue diff hiệu quả và tránh các lỗi sai lệch state tinh vi khi sắp xếp lại/lọc.
Biết dùng một id thực (không bao giờ dùng index cho danh sách động) và tách riêng v-for/v-if là điều thiết yếu để có danh sách đúng đắn, hiệu năng cao.