v-for merender daftar elemen dengan melakukan iterasi pada array (atau object/range). Anda harus selalu memasangkannya dengan :key yang unik agar Vue dapat melacak item secara 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 menggunakan key untuk mengidentifikasi item mana yang berubah, ditambahkan, atau dihapus, sehingga dapat menggunakan kembali dan mengurutkan ulang node DOM yang ada daripada membangun ulang. Tanpa key yang stabil, Vue kembali ke strategi "patch in-place" yang dapat menyebabkan 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>
Menggunakan index array sebagai key adalah kesalahan umum — ketika item diurutkan ulang, disisipkan, atau dihapus, state komponen/DOM (seperti nilai input atau state checkbox) dapat menempel 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 adalah cara Anda merender daftar dinamis.
:key tidak opsional dalam praktik: key yang stabil dan unik memungkinkan Vue's virtual DOM diff secara efisien dan menghindari bug state-mismatch yang halus saat mengurutkan ulang/menyaring.
Mengetahui cara menggunakan id asli (tidak pernah index untuk daftar dinamis) dan menjaga v-for/v-if tetap terpisah adalah penting untuk daftar yang benar dan performan.
Perpustakaan pertanyaan wawancara IT dengan jawaban mendetail — dari Junior hingga Senior.
Donasi