Borang untuk Menambah Elemen Array dalam Vue

Mari tambah teks daripada input ke hujung array secara reaktif. Mari kita mulakan pelaksanaannya. Katakan kita mempunyai array:

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

Tambahkan sifat newItem, yang menyokong operasi input:

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

Tunjukkan kandungan array sebagai senarai:

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

Sekarang mari buat input dan butang, di mana tekanan pada butang akan menambah teks input ke hujung senarai sebagai item baru:

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

Menekan butang akan memanggil kaedah addItem, yang akan mengambil teks daripada input dan menambahkannya sebagai elemen baru ke dalam array, menyebabkan perubahan reaktif pada senarai:

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

Diberi array. Diberi input. Diberi butang. Paparkan elemen array ini sebagai senarai ul. Pastikan apabila butang ditekan, teks daripada input ditambah ke hujung senarai.

Ubah suai tugas sebelumnya supaya item baru ditambah ke permulaan senarai.