Reaktivita polí ve Vue

Reaktivita funguje i při změnách poli, které jsou vypsány pomocí v-for. Pojďme si pro příklad zařídit, aby po kliknutí na tlačítko bylo do pole reaktivně přidán nový prvek a změny se okamžitě projevily i na obrazovce.

Pojďme popsané realizovat. Předpokládejme, že máme pole:

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

Vypišme prvky tohoto pole v cyklu:

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

Vytvořme tlačítko, po jehož stisknutí bude do pole přidán nový prvek:

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

Implementujme odpovídající metodu:

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

Je dáno tlačítko. Je dáno pole. Vypište prvky tohoto pole jako seznam ul. Zařiďte, aby po kliknutí na tlačítko byl na konec tohoto seznamu přidán nový bod.

Je dáno tlačítko. Je dáno pole. Vypište prvky tohoto pole jako seznam ul. Zařiďte, aby pokaždé po kliknutí na tlačítko se ze seznamu odstranil první bod.

Je dáno tlačítko. Je dáno pole. Vypište prvky tohoto pole jako seznam ul. Zařiďte, aby pokaždé po kliknutí na tlačítko se ze seznamu odstranil poslední bod.

Je dáno tlačítko. Je dáno pole. Vypište prvky tohoto pole jako seznam ul. Zařiďte, aby pokaždé po kliknutí na tlačítko se ze seznamu odstranil předposlední bod.

Je dáno tlačítko. Je dáno pole. Vypište prvky tohoto pole jako seznam ul. Zařiďte, aby po kliknutí na tlačítko se body seznamu seřadily.

Je dáno tlačítko. Je dáno pole. Vypište prvky tohoto pole jako seznam ul. Zařiďte, aby po kliknutí na tlačítko se body seznamu uspořádaly v obráceném pořadí.

Výjimky

Kvůli omezením JavaScriptu Vue není schopen zaznamenat následující změny v poli: přímé nastavení prvku podle indexu: items[klíč] = nováHodnota a explicitní změnu délky pole, například: items.length = nováDélka.