Reactiviteit van arrays in Vue

Reactiviteit treedt zelfs op bij wijzigingen van arrays die worden weergegeven via v-for. Laten we bijvoorbeeld zo instellen dat er bij een klik op de knop reactief een nieuw element aan de array wordt toegevoegd en de wijzigingen direct op het scherm zichtbaar zijn.

Laten we het beschrevene implementeren. Stel dat we een array hebben:

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

Laten we de elementen van deze array in een lus weergeven:

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

Laten we een knop maken waar bij het klikken er een nieuw element aan de array wordt toegevoegd:

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

Laten we de bijbehorende methode implementeren:

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

Er is een knop. Er is een array. Geef de elementen van deze array weer als een lijst ul. Zorg ervoor dat er bij een klik op de knop een nieuw item aan het einde van deze lijst wordt toegevoegd.

Er is een knop. Er is een array. Geef de elementen van deze array weer als een lijst ul. Zorg ervoor dat er elke keer bij het klikken op de knop het eerste item van de lijst wordt verwijderd.

Er is een knop. Er is een array. Geef de elementen van deze array weer als een lijst ul. Zorg ervoor dat er elke keer bij het klikken op de knop het laatste item van de lijst wordt verwijderd.

Er is een knop. Er is een array. Geef de elementen van deze array weer als een lijst ul. Zorg ervoor dat er elke keer bij het klikken op de knop het voorlaatste item van de lijst wordt verwijderd.

Er is een knop. Er is een array. Geef de elementen van deze array weer als een lijst ul. Zorg ervoor dat bij het klikken op de knop de items van de lijst worden gesorteerd.

Er is een knop. Er is een array. Geef de elementen van deze array weer als een lijst ul. Zorg ervoor dat bij het klikken op de knop de items van de lijst in omgekeerde volgorde worden geplaatst.

Uitzonderingen

Vanwege beperkingen in JavaScript, is Vue niet in staat de volgende wijzigingen in een array op te merken: het direct instellen van een element via een index: items[sleutel] = nieuweWaarde en de expliciete wijziging van de lengte van de array, bijvoorbeeld: items.length = nieuweLengte.