v-for کسی array (یا object/range) پر iterate کر کے elements کی ایک list رینڈر کرتا ہے۔ آپ کو ہمیشہ اسے ایک unique :key کے ساتھ استعمال کرنا چاہیے تاکہ Vue items کو مؤثر طریقے سے track کر سکے۔
<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 کو دوبارہ بنانے کے بجائے انہیں reuse اور reorder کر سکے۔ ایک stable key کے بغیر، Vue ایک "in-place patch" حکمت عملی پر واپس چلا جاتا ہے جو bugs کا سبب بن سکتی ہے:
<!-- ❌ 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 کو reorder، insert، یا delete کیا جاتا ہے، تو 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 وہ طریقہ ہے جس سے آپ dynamic lists رینڈر کرتے ہیں۔
:key عملی طور پر optional نہیں ہے: ایک stable، unique key Vue کے virtual DOM کو مؤثر طریقے سے diff کرنے دیتی ہے اور reorder/filter پر باریک state-mismatch bugs سے بچاتی ہے۔
ایک حقیقی id استعمال کرنا (dynamic lists کے لیے کبھی index نہیں) اور v-for/v-if کو الگ رکھنا درست، performant lists کے لیے ضروری ہے۔
تفصیلی جوابات کے ساتھ IT انٹرویو سوالات کی ایک لائبریری — جونیئر سے سینئر تک۔
عطیہ دیں