v-for prikazuje seznam elementov z iteracijo skozi polje (ali objekt/razpon). Vedno ga parujte z edinstvenim :key da Vue učinkovito spremlja elemente.
<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 uporablja key za identifikacijo elementov, ki so se spremenili, dodali ali odstranili, tako da lahko ponovno uporabi in preureja obstoječe DOM vozlišča namesto da jih obnavlja. Brez stabilnega keya Vue pada nazaj na strategijo "in-place patch", ki lahko povzroči napake:
<!-- ❌ 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>
Uporaba indeksa polja kot keya je pogosta napaka — ko se elementi preuredijo, vstavijo ali izbrišejo, stanje komponente/DOM (kot so vrednosti inputa ali stanja checkboxa) lahko ostane na napačni vrstici.
<!-- ❌ 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 je način za prikaz dinamičnih seznamov.
:key ni opcijski v praksi: stabilen, edinstven key omogoči Vue-u virtualni DOM diff učinkovit in se izogne subtilnim napakam neskladja stanja pri preureditvi/filtriranju.
Znanje uporabe pravega id-ja (nikoli indeksa za dinamične sezname) in ločitve v-for/v-if je bistveno za pravilne, učinkovite sezname.