Reaktywność tablic w Vue

Reaktywność działa nawet przy zmianach tablic, wyświetlanych za pomocą v-for. Zróbmy dla przykładu tak, aby po kliknięciu przycisku do tablicy reaktywnie dodawany był nowy element i zmiany następowały natychmiast również na ekranie.

Zaimplementujmy opisane. Załóżmy, że mamy tablicę:

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

Wyświetlmy elementy tej tablicy w pętli:

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

Zróbmy przycisk, po kliknięciu którego do tablicy będzie dodawany nowy element:

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

Zaimplementujmy odpowiednią metodę:

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

Dany jest przycisk. Dana jest tablica. Wyświetl elementy tej tablicy w postaci listy ul. Zrób tak, aby po kliknięciu przycisku na koniec tej listy dodał się nowy punkt.

Dany jest przycisk. Dana jest tablica. Wyświetl elementy tej tablicy w postaci listy ul. Zrób tak, aby za każdym razem po kliknięciu przycisku z listy usuwał się pierwszy punkt.

Dany jest przycisk. Dana jest tablica. Wyświetl elementy tej tablicy w postaci listy ul. Zrób tak, aby za każdym razem po kliknięciu przycisku z listy usuwał się ostatni punkt.

Dany jest przycisk. Dana jest tablica. Wyświetl elementy tej tablicy w postaci listy ul. Zrób tak, aby za każdym razem po kliknięciu przycisku z listy usuwał się przedostatni punkt.

Dany jest przycisk. Dana jest tablica. Wyświetl elementy tej tablicy w postaci listy ul. Zrób tak, aby po kliknięciu przycisku punkty listy posortowały się.

Dany jest przycisk. Dana jest tablica. Wyświetl elementy tej tablicy w postaci listy ul. Zrób tak, aby po kliknięciu przycisku punkty listy ustawiły się w odwrotnej kolejności.

Wyjątki

Z powodu ograniczeń JavaScript, Vue nie jest w stanie wykryć następujących zmian w tablicy: bezpośredniego ustawienia elementu po indeksie: items[klucz] = nowaWartość oraz jawnej zmiany długości tablicy, na przykład: items.length = nowaDługość.