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 নোড পুনরায় ব্যবহার এবং পুনরায় অর্ডার করতে পারে। একটি স্থিতিশীল 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 হিসাবে ব্যবহার করা একটি সাধারণ ভুল — যখন আইটেমগুলি পুনরায় সাজানো হয়, সন্নিবেশ করা হয় বা মুছে ফেলা হয়, component/DOM স্থিতি (যেমন ইনপুট মান বা চেকবক্স অবস্থা) ভুল সারিতে আটকে থাকতে পারে।
<!-- ❌ 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 কে দক্ষ করতে এবং পুনরায় অর্ডার/ফিল্টারে সূক্ষ্ম state-mismatch বাগ এড়াতে দেয়।
কীভাবে একটি বাস্তব id ব্যবহার করতে হয় তা জানা (গতিশীল তালিকার জন্য কখনও index ব্যবহার করবেন না) এবং v-for/v-if কে আলাদা রাখা সঠিক, কর্মক্ষম তালিকার জন্য অপরিহার্য।