Reaktivitet i arrayer i Vue

Reaktivitet utlöses även vid förändringar i arrayer som visas genom v-for. Låt oss som exempel göra så att vid ett klick på en knapp läggs ett nytt element reaktivt till i arrayen och förändringarna omedelbart återspeglas på skärmen.

Låt oss implementera det som beskrivits. Låt oss anta att vi har en array:

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

Låt oss visa elementen i denna array i en loop:

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

Låt oss skapa en knapp, vid klick på vilken ett nytt element läggs till i arrayen:

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

Låt oss implementera motsvarande metod:

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

En knapp är given. En array är given. Visa elementen i denna array som en lista ul. Gör så att vid ett klick på knappen läggs ett nytt punkt till i slutet av listan.

En knapp är given. En array är given. Visa elementen i denna array som en lista ul. Gör så att varje gång knappen klickas tas den första punkten i listan bort.

En knapp är given. En array är given. Visa elementen i denna array som en lista ul. Gör så att varje gång knappen klickas tas den sista punkten i listan bort.

En knapp är given. En array är given. Visa elementen i denna array som en lista ul. Gör så att varje gång knappen klickas tas den näst sista punkten i listan bort.

En knapp är given. En array är given. Visa elementen i denna array som en lista ul. Gör så att vid ett klick på knappen sorteras punkterna i listan.

En knapp är given. En array är given. Visa elementen i denna array som en lista ul. Gör så att vid ett klick på knappen ordnas punkterna i listan i omvänd ordning.

Undantag

På grund av begränsningar i JavaScript, kan Vue inte upptäcka följande förändringar i en array: direkt tilldelning av ett element via index: items[nyckel] = nyttVärde och explicit förändring av arrayens längd, till exempel: items.length = nyLängd.