v-for renderira popis elemenata iteracijom preko niza (ili objekta/raspon). Trebali biste ga uvijek pariti s jedinstvenim :key kako bi Vue mogao učinkovito pratiti stavke.
<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 koristi key kako bi identificirao koje su stavke promijenjene, dodane ili uklonjene, tako da može ponovno koristiti i preurediti postojeće DOM čvorove umjesto da ih ponovno gradi. Bez stabilnog ključa, Vue se vraća na strategiju "popravka na mjestu" koja može uzrokovati greške:
<!-- ❌ 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>
Korištenje niza indeksa kao ključa je česta greška — kada se stavke preuredjuju, umeću ili brišu, stanje komponente/DOM (kao što su vrijednosti unosa ili stanja polja za potvrdu) može ostati na pogrešnom redoslijedu.
<!-- ❌ 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 kako renderirati dinamičke popise.
:key nije opciono u praksi: stabilan, jedinstveni ključ omogućuje Vue-ovom virtualnom DOM-u da učinkovito provodi diff i izbjegava suptilne greške neusklađenosti stanja pri redoslijedu/filtriraniju.
Znati kako koristiti pravi id (nikada indeks za dinamičke popise) i čuvati v-for/v-if odvojenim bitno je za ispravne, efikasne popise.
Knjižnica IT pitanja za razgovore za posao s detaljnim odgovorima — od Juniora do Seniora.
Doniraj