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