Tömbök reaktivitása Vue-ban

A reaktivitás akkor is működik, amikor a v-for-ral kiírt tömbök változnak. Példaként tegyük úgy, hogy egy gomb megnyomására a tömbhöz reaktívan hozzáadódjon egy új elem, és a változások azonnal megjelenjenek a képernyőn is.

Valósítsuk meg a leírtakat. Legyen egy tömbünk:

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

Jelenítsük meg a tömb elemeit ciklusban:

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

Készítsünk egy gombot, amelyre kattintva új elem kerül a tömbbe:

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

Valósítsuk meg a megfelelő metódust:

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

Adott egy gomb. Adott egy tömb. Jelenítsd meg a tömb elemeit egy ul listában. Úgy állítsd be, hogy a gomb megnyomására a lista végére új elem kerüljön.

Adott egy gomb. Adott egy tömb. Jelenítsd meg a tömb elemeit egy ul listában. Úgy állítsd be, hogy a gomb minden megnyomásakor a lista első eleme törlődjön.

Adott egy gomb. Adott egy tömb. Jelenítsd meg a tömb elemeit egy ul listában. Úgy állítsd be, hogy a gomb minden megnyomásakor a lista utolsó eleme törlődjön.

Adott egy gomb. Adott egy tömb. Jelenítsd meg a tömb elemeit egy ul listában. Úgy állítsd be, hogy a gomb minden megnyomásakor a lista utolsó előtti eleme törlődjön.

Adott egy gomb. Adott egy tömb. Jelenítsd meg a tömb elemeit egy ul listában. Úgy állítsd be, hogy a gomb megnyomására a lista elemei rendeződjenek.

Adott egy gomb. Adott egy tömb. Jelenítsd meg a tömb elemeit egy ul listában. Úgy állítsd be, hogy a gomb megnyomására a lista elemei fordított sorrendbe kerüljenek.

Kivételek

A JavaScript korlátai miatt a Vue nem képes észlelni a tömb következő változásait: az elem közvetlen index alapján történő beállítását: items[kulcs] = újÉrték és a tömb hosszának explicit módosítását, például: items.length = újHossz.