v-for inaonyesha orodha ya elementi kwa kurudia kwenye safu (au kitu/eneo). Unapaswa kila wakati kuiunganisha na :key ya kipekee ili Vue iweze kufuatilia vipengee kwa ufanisi.
<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 inatumia key kubaini vipengee vipi viliyobadilika, viliongezwa, au kuondolewa, ili iweze kurudia na kuorodhesha nodi za DOM zilizopo badala ya kuzijenga upya. Bila key thabiti, Vue inarejelea mkakati wa "in-place patch" unaweza kusababisha hitilafu:
<!-- ❌ 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>
Kutumia fahirisi la safu kama key ni kosa la kawaida — wakati vipengee vinaorodhesha upya, kuingizwa, au kuondolewa, hali ya sehemu/DOM (kama vile maadili ya ingizo au hali ya checkbox) inaweza kubaki katika safu isiyo sahihi.
<!-- ❌ 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 ndio jinsi unavyoonyesha orodha za nguvu.
:key si ikiyumba kwa vitendo: key thabiti na ya kipekee inaruhusu Vue diff ya virtual DOM kuwa na ufanisi na kuepuka hitilafu za kutofautiana kwa hali kwa kupanga upya/kuchuja.
Kujua kutumia id halisi (kamwe index kwa orodha za nguvu) na kuweka v-for/v-if tofauti ni muhimu kwa orodha sahihi, zenye utendaji mzuri.
Maktaba ya maswali ya mahojiano ya IT yenye majibu ya kina — kutoka Junior hadi Senior.
Changia