Form untuk Menambahkan Elemen Array di Vue

Mari kita tambahkan teks dari input ke akhir array secara reaktif. Mari kita mulai implementasinya. Misalkan kita memiliki array:

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

Mari tambahkan properti newItem, yang mendukung kerja input:

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

Tampilkan isi array dalam bentuk daftar:

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

Sekarang mari buat input dan tombol, yang ketika ditekan, teks dari input akan ditambahkan ke akhir daftar sebagai item baru:

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

Ketika tombol ditekan, metode addItem akan dipanggil, yang akan mengambil teks dari input dan menambahkannya sebagai elemen baru ke dalam array, yang akan menyebabkan perubahan daftar secara reaktif:

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

Diberikan array. Diberikan input. Diberikan tombol. Tampilkan elemen dari array ini dalam bentuk daftar ul. Buatlah sehingga ketika tombol ditekan, teks dari input akan ditambahkan ke akhir daftar.

Modifikasi tugas sebelumnya sehingga item baru ditambahkan ke awal daftar.