v-for nggawe daftar elemen kanthi ngulang array (utawa obyek/jangkauan). Sampeyan kudu tansah nggawe pasangan karo :key sing unik supaya Vue bisa nglacak item kanthi efisien.
<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 nggunakake key kanggo ngenali items endi sing owah, ditambah, utawa diilangi, supaya bisa nggunakake maneh lan nata DOM nodes sing wis ana nglawan ngebangun maneh. Tanpa key sing tetep, Vue mudhun menyang strategi "in-place patch" sing bisa nimbulaké bug:
<!-- ❌ 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>
Nggunakake indeks array minangka key iku lepat umum — nalika item diatur maneh, ditambah, utawa diilangi, kahanan komponen/DOM (kaya nilai input utawa status checkbox) bisa tetep ing baris sing 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 iku cara kanggo nggawe daftar dinamis.
:key ora opsional ing praktik: key sing unik lan tetep ndadekake virtual DOM Vue bisa nggawe diff kanthi efisien lan ngindhari bug kahanan sing tidak cocok ing reorder/filter.
Weruhing nggunakake id sing nyata (ora tau indeks kanggo daftar dinamis) lan menehi v-for/v-if kapisah iku penting kanggo daftar sing bener lan mandheg.