Kereaktifan Array dalam Vue

Kereaktifan berfungsi walaupun pada perubahan array yang dipaparkan melalui v-for. Mari kita buat contoh supaya apabila butang ditekan, elemen baharu ditambah secara reaktif ke dalam array dan perubahan serta-merta berlaku pada skrin.

Mari kita laksanakan apa yang diterangkan. Katakan kita mempunyai array:

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

Mari paparkan elemen array ini dalam gelung:

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

Mari buat butang, yang apabila ditekan, elemen baharu akan ditambah ke dalam array:

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

Mari laksanakan kaedah yang sepadan:

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

Diberi butang. Diberi array. Paparkan elemen array ini dalam bentuk senarai ul. Buat supaya apabila butang ditekan, item baharu ditambah ke hujung senarai ini.

Diberi butang. Diberi array. Paparkan elemen array ini dalam bentuk senarai ul. Buat supaya setiap kali butang ditekan, item pertama senarai dipadam.

Diberi butang. Diberi array. Paparkan elemen array ini dalam bentuk senarai ul. Buat supaya setiap kali butang ditekan, item terakhir senarai dipadam.

Diberi butang. Diberi array. Paparkan elemen array ini dalam bentuk senarai ul. Buat supaya setiap kali butang ditekan, item kedua terakhir senarai dipadam.

Diberi butang. Diberi array. Paparkan elemen array ini dalam bentuk senarai ul. Buat supaya apabila butang ditekan, item senarai disusun mengikut urutan.

Diberi butang. Diberi array. Paparkan elemen array ini dalam bentuk senarai ul. Buat supaya apabila butang ditekan, item senarai disusun dalam urutan terbalik.

Pengecualian

Disebabkan oleh batasan JavaScript, Vue tidak dapat mengesan perubahan berikut dalam array: penetapan elemen secara langsung mengikut indeks: items[kunci] = nilaiBaharu dan perubahan panjang array secara eksplisit, contohnya: items.length = panjangBaharu.