v-for ले array (वा object/range) को माध्यमबाट पुनरावृत्ति गरेर elements को list रेन्डर गर्छ। तपाईंले यसलाई सधैं अनौठो :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 परिवर्तन भएका छन्, थपिएका छन् वा हटाइएका छन् भनी पहिचान गर्न सक्छ, ताकि यो तिनलाई पुन: निर्माण गर्नको सट्टा existing DOM nodes लाई पुन: प्रयोग गर्न र पुनर्व्यवस्थित गर्न सक्छ। स्थिर 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 पुनर्व्यवस्थित हुन्छन्, सम्मिलित हुन्छन् वा हटाइन्छन्, 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 अभ्यासमा अनिवार्य छैन: एक स्थिर, अनौठो key ले Vue को virtual DOM diff लाई प्रभावकारीतरीकले काम गर्न दिन्छ र reorder/filter मा सूक्ष्म state-mismatch bugs बचाउँछ।
रियल id प्रयोग गर्न (कहिले पनि dynamic lists को लागि index नगर्न) र v-for/v-if लाई अलग राख्न जान्न सही, प्रदर्शनशील lists को लागि आवश्यक छ।
विस्तृत उत्तरसहित IT अन्तर्वार्ता प्रश्नहरूको पुस्तकालय — जुनियरदेखि सिनियरसम्म।
दान गर्नुहोस्