v-for એરે (અથવા 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 નોડ્સને ફરીથી ઉપયોગ અને પુનઃક્રમમાં મૂકી શકે તેને પુનર્નિર્માણ કરવાને બદલે. સ્થિર 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 lists રેન્ડર કરવાની રીત છે.
:key વ્યવહારમાં વૈકલ્પિક નથી: stableથી unique key Vue ના virtual DOM diff ને અક્ષમતાથી આવતું કરે છે અને reorder/filter પર સૂક્ષ્મ state-mismatch bugs ને ટાળે છે.
વાસ્તવિક id ને વાપરવાનું જાણવું (dynamic lists માટે કદી index નહીં) અને v-for/v-if ને અલગ રાખવું સાચી, performant lists માટે આવશ્યક છે.