v-for atvaizduoja elementų sąrašą kartodamas masyvą (arba objektą/diapazoną). Jūs visada turėtumėte jį suderinti su unikalia :key, kad Vue galėtų efektyviai sekti elementus.
<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 naudoja key norint nustatyti, kurie elementai pasikeitė, buvo pridėti arba pašalinti, todėl gali iš naujo panaudoti ir pertvarkytį esamus DOM mazgus vietoj jų atkūrimo. Be stabilaus rakto, Vue grįžta prie "in-place patch" strategijos, kuri gali sukelti klaidų:
<!-- ❌ 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>
Masyvų indekso naudojimas kaip raktas yra bendra klaida — kai elementai pertvarkomi, įterpti arba ištrinti, komponentas/DOM būsena (pavyzdžiui, įvesties reikšmės arba žymimųjų laukelių būsena) gali likti netinkamoje eilutėje.
<!-- ❌ 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 yra būdas atvaizduoti dinaminius sąrašus.
:key praktiškai nėra pasirenkamasis: stabilus, unikalus raktas leidžia Vue virtualiam DOM efektyviai daryti skirtumą ir išvengti subtilių būsenos neatitikimo klaidų keičiant tvarką/filtruojant.
Žinoti, kaip naudoti tikrą id (niekada ne indeksą dinaminiams sąrašams) ir laikyti v-for/v-if atskirtą yra būtina teisingiems ir veiklangiems sąrašams.