Vue-এ অ্যারেগুলোর রিয়েক্টিভিটি

v-for দিয়ে প্রদর্শিত অ্যারেগুলোতে পরিবর্তন হলেও রিয়েক্টিভিটি কাজ করে। উদাহরণস্বরূপ, আসুন আমরা এমন করি যাতে একটি বাটনে ক্লিক করলে একটি নতুন উপাদান প্রতিক্রিয়াশীলভাবে অ্যারেতে যোগ হয় এবং পরিবর্তনগুলি তাত্ক্ষণিকভাবে স্ক্রীনেও দেখা যায়।

আসুন বর্ণিত বিষয়টি বাস্তবায়ন করি। ধরুন আমাদের একটি অ্যারে আছে:

data() {
	return {
		arr: ['a', 'b', 'c'],
	}
}

আসুন একটি লুপে এই অ্যারের উপাদানগুলি প্রদর্শন করি:

<template>
	<p v-for="elem in arr">
		{{ elem }}
	</p>
</template>

আসুন একটি বাটন তৈরি করি, যাতে ক্লিক করলে অ্যারেতে একটি নতুন উপাদান যোগ হবে:

<template>
	<p v-for="elem in arr">
		{{ elem }}
	</p>
	<button @click="add">add</button>
</template>

আসুন সংশ্লিষ্ট মেথডটি বাস্তবায়ন করি:

methods: {
	add: function() {
		this.arr.push('xxx');
	}
}

একটি বাটন দেওয়া আছে। একটি অ্যারে দেওয়া আছে। এই অ্যারের উপাদানগুলি একটি ul তালিকা আকারে প্রদর্শন করুন। এমন করুন যাতে বাটনে ক্লিক করলে এই তালিকার শেষে একটি নতুন আইটেম যোগ হয়।

একটি বাটন দেওয়া আছে। একটি অ্যারে দেওয়া আছে। এই অ্যারের উপাদানগুলি একটি ul তালিকা আকারে প্রদর্শন করুন। এমন করুন যাতে প্রতিবার বাটনে ক্লিক করলে তালিকার প্রথম আইটেমটি মুছে যায়।

একটি বাটন দেওয়া আছে। একটি অ্যারে দেওয়া আছে। এই অ্যারের উপাদানগুলি একটি ul তালিকা আকারে প্রদর্শন করুন। এমন করুন যাতে প্রতিবার বাটনে ক্লিক করলে তালিকার শেষ আইটেমটি মুছে যায়。

একটি বাটন দেওয়া আছে। একটি অ্যারে দেওয়া আছে। এই অ্যারের উপাদানগুলি একটি ul তালিকা আকারে প্রদর্শন করুন। এমন করুন যাতে প্রতিবার বাটনে ক্লিক করলে তালিকার শেষের আগের আইটেমটি মুছে যায়।

একটি বাটন দেওয়া আছে। একটি অ্যারে দেওয়া আছে। এই অ্যারের উপাদানগুলি একটি ul তালিকা আকারে প্রদর্শন করুন। এমন করুন যাতে বাটনে ক্লিক করলে তালিকার আইটেমগুলি সাজানো顺序 হয়।

একটি বাটন দেওয়া আছে। একটি অ্যারে দেওয়া আছে। এই অ্যারের উপাদানগুলি একটি ul তালিকা আকারে প্রদর্শন করুন। এমন করুন যাতে বাটনে ক্লিক করলে তালিকার আইটেমগুলি উল্টো ক্রমে সাজে।

ব্যতিক্রম

JavaScript-এর সীমাবদ্ধতার কারণে, Vue অ্যারেতে নিম্নলিখিত পরিবর্তনগুলি লক্ষ্য করতে সক্ষম নয়: সূচী দ্বারা সরাসরি এলিমেন্ট সেট করা: items[key] = newValue এবং দৈর্ঘ্য স্পষ্টভাবে পরিবর্তন করা অ্যারের, উদাহরণস্বরূপ: items.length = newLength.