Vue-এ key অ্যাট্রিবিউট

Vue দ্বারা v-for নির্দেশিকা ব্যবহার করে রেন্ডার করা উপাদানগুলির একটি তালিকা আপডেট করার সময়, ডিফল্টরূপে "in-place" আপডেট কৌশল ব্যবহার করা হয়। যদি অ্যারে বা অবজেক্টের উপাদানগুলির ক্রম পরিবর্তিত হয়, Vue DOM উপাদানগুলি সরাবে না, বরং সংশ্লিষ্ট সূচীতে নতুন ডেটা প্রদর্শন করতে প্রতিটি উপাদানকে "in-place" আপডেট করবে।

প্রতিটি উপাদানের পরিচয় কীভাবে নির্ধারণ করতে হয় তা Vue-কে ইঙ্গিত দেওয়ার জন্য, এবং এইভাবে বিদ্যমান উপাদানগুলি পুনরায় ব্যবহার এবং ক্রমবিন্যাস করতে, প্রতিটি উপাদানের জন্য একটি অনন্য key অ্যাট্রিবিউট নির্দিষ্ট করা আবশ্যক।

কী ছাড়া, Vue একটি অ্যালগরিদম ব্যবহার করে যা উপাদানগুলির চলাচল কমানোর চেষ্টা করে এবং একই ধরনের উপাদানগুলি পরিবর্তন/পুনরায় ব্যবহার করতে সর্বোচ্চ চেষ্টা করবে। কী ব্যবহার করার সময়, উপাদানগুলি কীগুলির ক্রম পরিবর্তনের অনুসারে পুনর্বিন্যাস করা হবে, এবং যেসব উপাদানের কী আর নেই সেগুলি সর্বদা অপসারণ/ধ্বংস করা হবে।

v-for এর সাথে key অ্যাট্রিবিউট নির্দিষ্ট করা সর্বদা সুপারিশ করা হয়, যে ক্ষেত্রে DOM বিষয়বস্তু সহজ, বা জানতে পারফরম্যান্স উন্নত করতে ডিফল্ট আপডেট কৌশলের উপর নির্ভর করছেন সেই ক্ষেত্রগুলি ছাড়া।

সাধারণত, কী যোগ করার প্রশ্নটি উঠে অবজেক্টের একটি অ্যারে পুনরাবৃত্তি করার সময়। এই ক্ষেত্রে, অবজেক্টের কীগুলির মধ্যে একটি হল একটি অনন্য ক্ষেত্র, উদাহরণস্বরূপ, id:

data() {
	return {
		users: [
			{
				id: 1,
				name: 'name1',
				surn: 'surn1',
			},
			{
				id: 2,
				name: 'name2',
				surn: 'surn2',
			},
			{
				id: 3,
				name: 'name3',
				surn: 'surn3',
			},
		]
	}
}

আসুন সংশ্লিষ্ট কীগুলি নির্দিষ্ট করে, একটি লুপ দিয়ে দেওয়া অ্যারেটি পুনরাবৃত্তি করি:

<template>
	<p v-for="user in users" :key="user.id">
		{{ user.name }}
		{{ user.surn }}
	</p>
</template>

নিম্নলিখিত অ্যারেটি একটি লুপ দিয়ে পুনরাবৃত্তি করুন এবং একটি ul তালিকা হিসাবে পণ্যের নামগুলি প্রদর্শন করুন:

data() {
	return {
		products: [
			{
				id: 1,
				name: 'product1',
			},
			{
				id: 2,
				name: 'product2',
			},
			{
				id: 3,
				name: 'product3',
			},
		]
	}
}