Vue'da Dizi Öğeleri Ekleme Formu

Giriş alanındaki metni dizinin sonuna reaktif olarak ekleyelim. Uygulamaya başlayalım. Bize bir dizi verildiğini varsayalım:

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

Giriş alanıyla çalışmayı destekleyen newItem özelliğini ekleyelim:

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

Dizinin içeriğini bir liste olarak gösterelim:

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

Şimdi bir giriş alanı ve buton yapalım, butona tıklandığında giriş alanının metni listenin sonuna yeni bir madde olarak eklensin:

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

Butona tıklandığında, addItem metodu çağrılacak, bu metod giriş alanındaki metni alacak ve onu diziye yeni bir öğe olarak ekleyecek, bu da listenin reaktif olarak değişmesine neden olacak:

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

Bir dizi verildi. Bir giriş alanı verildi. Bir buton verildi. Bu dizinin öğelerini bir ul listesi olarak gösterin. Butona tıklandığında, giriş alanındaki metnin listenin sonuna eklenmesini sağlayın.

Önceki görevi, yeni maddenin listenin başına eklenmesi şeklinde değiştirin.