Reaktivita polí vo Vue

Reaktivita funguje aj pri zmenách poli, ktoré sa vypisujú pomocou v-for. Pre príklad si urobme tak, aby po kliknutí na tlačidlo sa do poľa reaktívne pridal nový prvok a zmeny sa okamžite prejavili aj na obrazovke.

Realizujme popísané. Nech máme pole:

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

Vypíšme prvky tohto poľa v cykle:

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

Urobme tlačidlo, po kliknutí na ktoré sa do poľa pridá nový prvok:

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

Realizujme zodpovedajúcu metódu:

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

Dané tlačidlo. Dané pole. Vypíšte prvky tohto poľa ako zoznam ul. Urobte tak, aby po kliknutí na tlačidlo na koniec tohto zoznamu pribudol nový bod.

Dané tlačidlo. Dané pole. Vypíšte prvky tohto poľa ako zoznam ul. Urobte tak, aby zakaždým po kliknutí na tlačidlo sa zo zoznamu odstránil prvý bod.

Dané tlačidlo. Dané pole. Vypíšte prvky tohto poľa ako zoznam ul. Urobte tak, aby zakaždým po kliknutí na tlačidlo sa zo zoznamu odstránil posledný bod.

Dané tlačidlo. Dané pole. Vypíšte prvky tohto poľa ako zoznam ul. Urobte tak, aby zakaždým po kliknutí na tlačidlo sa zo zoznamu odstránil predposledný bod.

Dané tlačidlo. Dané pole. Vypíšte prvky tohto poľa ako zoznam ul. Urobte tak, aby po kliknutí na tlačidlo sa body zoznamu zoradili.

Dané tlačidlo. Dané pole. Vypíšte prvky tohto poľa ako zoznam ul. Urobte tak, aby po kliknutí na tlačidlo sa body zoznamu usporiadali v opačnom poradí.

Výnimky

Kvôli obmedzeniam JavaScriptu, Vue nie je schopný zaznamenať nasledujúce zmeny v poli: priamu nastavenie prvku podľa indexu: items[kľúč] = nováHodnota a explicitnú zmenu dĺžky poľa, napríklad: items.length = nováDĺžka.