Reattività degli Array in Vue

La reattività funziona anche con le modifiche agli array visualizzati tramite v-for. Facciamo un esempio: facciamo in modo che alla pressione di un pulsante, un nuovo elemento venga aggiunto reattivamente all'array e le modifiche avvengano istantaneamente anche sullo schermo.

Implementiamo quanto descritto. Supponiamo di avere un array:

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

Visualizziamo gli elementi di questo array in un ciclo:

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

Creiamo un pulsante che, quando cliccato, aggiunga un nuovo elemento all'array:

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

Implementiamo il metodo corrispondente:

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

Dato un pulsante. Dato un array. Visualizza gli elementi di questo array come una lista ul. Fai in modo che alla pressione del pulsante, un nuovo elemento venga aggiunto alla fine di questa lista.

Dato un pulsante. Dato un array. Visualizza gli elementi di questo array come una lista ul. Fai in modo che ogni volta che si preme il pulsante, venga rimosso il primo elemento della lista.

Dato un pulsante. Dato un array. Visualizza gli elementi di questo array come una lista ul. Fai in modo che ogni volta che si preme il pulsante, venga rimosso l'ultimo elemento della lista.

Dato un pulsante. Dato un array. Visualizza gli elementi di questo array come una lista ul. Fai in modo che ogni volta che si preme il pulsante, venga rimosso il penultimo elemento della lista.

Dato un pulsante. Dato un array. Visualizza gli elementi di questo array come una lista ul. Fai in modo che alla pressione del pulsante gli elementi della lista vengano ordinati.

Dato un pulsante. Dato un array. Visualizza gli elementi di questo array come una lista ul. Fai in modo che alla pressione del pulsante gli elementi della lista vengano invertiti di ordine.

Eccezioni

A causa delle limitazioni di JavaScript, Vue non è in grado di rilevare le seguenti modifiche a un array: l'assegnazione diretta di un elemento tramite indice: items[chiave] = nuovoValore e la modifica esplicita della lunghezza dell'array, ad esempio: items.length = nuovaLunghezza.