v-for ਇੱਕ array (ਜਾਂ object/range) ਦੇ ਮਾধਿਅਮ ਨਾਲ ਦੁਹਰਾ ਕਰਕੇ elements ਦੀ ਇੱਕ ਲਿਸਟ ਰੈਂਡਰ ਕਰਦਾ ਹੈ। ਤੁਹਾਨੂੰ ਇਸ ਨੂੰ ਹਮੇਸ਼ਾ ਇੱਕ ਵਿਲੱਖਣ :key ਦੇ ਨਾਲ ਜੋੜਨਾ ਚਾਹੀਦਾ ਹੈ ਤਾਂ ਕਿ Vue items ਨੂੰ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਤਰੀਕੇ ਨਾਲ ਟਰੈਕ ਕਰ ਸਕੇ।
<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 key ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਪਛਾਣ ਕਰਦਾ ਹੈ ਕਿ ਕਿਹੜੇ items ਬਦਲ ਗਏ, ਸ਼ਾਮਲ ਕੀਤੇ ਗਏ, ਜਾਂ ਹਟਾਏ ਗਏ, ਇਸ ਲਈ ਇਹ ਮੌਜੂਦਾ DOM nodes ਨੂੰ ਦੁਬਾਰਾ ਵਰਤ ਸਕੇ ਅਤੇ ਦੁਬਾਰਾ ਸਟ੍ਹੀਕ ਕਰ ਸਕੇ ਉਹਨਾਂ ਨੂੰ ਮੁੜ ਬਣਾਉਣ ਦੀ ਥਾਂ। ਇੱਕ ਸਥਿਰ key ਤੋਂ ਬਿਨਾਂ, Vue ਇੱਕ "in-place patch" ਰਣਨੀਤੀ ਦੀ ਪਿੱਠ ਵੱਲ ਜਾਂਦਾ ਹੈ ਜੋ ਬਗ ਦਾ ਕਾਰਨ ਬਣ ਸਕਦਾ ਹੈ:
<!-- ❌ 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>
Array index ਨੂੰ key ਦੇ ਤੌਰ ਤੇ ਵਰਤਨਾ ਇੱਕ ਆਮ ਗਲਤੀ ਹੈ — ਜਦੋਂ items ਨੂੰ ਮੁੜ ਸਟ੍ਹੀਕ ਕੀਤਾ ਜਾਵੇ, ਸ਼ਾਮਲ ਕੀਤਾ ਜਾਵੇ, ਜਾਂ ਹਟਾਇਆ ਜਾਵੇ, component/DOM state (ਜਿਵੇਂ input values ਜਾਂ checkbox states) ਗਲਤ row ਨਾਲ ਚਿਪਕ ਸਕਦਾ ਹੈ।
<!-- ❌ 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 ਯਾਦ ਸੂਚੀਆਂ ਰੈਂਡਰ ਕਰਨ ਦਾ ਤਰੀਕਾ ਹੈ।
:key ਅਭਿਆਸ ਵਿੱਚ ਚੋਣਵੀ ਨਹੀਂ ਹੈ: ਇੱਕ ਸਥਿਰ, ਵਿਲੱਖਣ key Vue ਦੇ virtual DOM diff ਨੂੰ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਤਰੀਕੇ ਨਾਲ ਕੰਮ ਕਰਨ ਦਿੰਦਾ ਹੈ ਅਤੇ reorder/filter ਤੇ ਸੂਖਮ state-mismatch bugs ਨਾਲ ਬਚਦਾ ਹੈ।
ਇਹ ਜਾਣਨਾ ਕਿ ਇੱਕ ਰੀਅਲ id ਕਦੋਂ ਵਰਤਿਆ ਜਾਵੇ (dynamic lists ਲਈ ਕਦੀ index ਨਹੀਂ) ਅਤੇ v-for/v-if ਨੂੰ ਵੱਖਰਾ ਰੱਖਣਾ ਸਹੀ, ਚੰਗੇ ਕਾਰਕ ਸਮੇਤ lists ਲਈ ਜ਼ਰੂਰੀ ਹੈ।