Vue-এ অ্যারে আইটেম যোগ করার ফর্ম

আসুন ইনপুট থেকে টেক্সটটি অ্যারের শেষে প্রতিক্রিয়াশীলভাবে যোগ করি। বাস্তবায়ন শুরু করা যাক। ধরুন আমাদের একটি অ্যারে দেওয়া হয়েছে:

data() {
	return {
		items: ['a', 'b', 'c', 'd', 'e'],
	}
}

আসুন একটি newItem প্রপার্টি যোগ করি, যা ইনপুটের কাজ সমর্থন করে:

data() {
	return {
		newItem: '',
		items: ['a', 'b', 'c', 'd', 'e'],
	}
}

আসুন অ্যারের বিষয়বস্তু একটি তালিকা আকারে প্রদর্শন করি:

<template>
	<ul>
		<li v-for="(item, index) in items" :key="index">
			{{ item }}
		</li>
	</ul>
</template>

আসুন এখন একটি ইনপুট এবং একটি বাটন তৈরি করি, যে বাটনে ক্লিক করলে ইনপুটের টেক্সটটি তালিকায় একটি নতুন আইটেম হিসাবে শেষে যোগ হবে:

<template>
	<input v-model="newItem">
	<button @click="addItem">add</button>
</template>

বাটনে ক্লিক করলে addItem মেথডটি কল হবে, যা ইনপুট থেকে টেক্সট নেবে এবং এটিকে একটি নতুন উপাদান হিসাবে অ্যারেতে যোগ করবে, যা প্রতিক্রিয়াশীলভাবে তালিকা পরিবর্তন করবে:

methods: {
	addItem: function() {
		this.items.push(this.newItem);
	}
}

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

পূর্ববর্তী কাজটি পরিবর্তন করুন যাতে নতুন আইটেমটি তালিকার শুরুতে যোগ হয়।