Reaktivnost nizova u Vue

Reaktivnost se aktivira čak i pri promenama nizova koji se prikazuju preko v-for. Hajde da za primer napravimo da se klikom na dugme u niz reaktivno doda novi element i promene momentalno odraze i na ekranu.

Hajde da implementiramo opisano. Neka postoji niz:

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

Prikažimo elemente ovog niza u petlji:

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

Napravimo dugme, čijim klikom u niz će biti dodat novi element:

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

Implementirajmo odgovarajuću metodu:

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

Dat je dugme. Dat je niz. Prikažite elemente ovog niza u obliku liste ul. Uredite tako da klikom na dugme na kraj ove liste doda nova stavka.

Dat je dugme. Dat je niz. Prikažite elemente ovog niza u obliku liste ul. Uredite tako da svaki put klikom na dugme liste obriše prva stavka.

Dat je dugme. Dat je niz. Prikažite elemente ovog niza u obliku liste ul. Uredite tako da svaki put klikom na dugme liste obriše poslednja stavka.

Dat je dugme. Dat je niz. Prikažite elemente ovog niza u obliku liste ul. Uredite tako da svaki put klikom na dugme liste obriše pretposlednja stavka.

Dat je dugme. Dat je niz. Prikažite elemente ovog niza u obliku liste ul. Uredite tako da klikom na dugme stavke liste budu sortirane.

Dat je dugme. Dat je niz. Prikažite elemente ovog niza u obliku liste ul. Uredite tako da klikom na dugme stavke liste budu poređane obrnutim redosledom.

Izuzeci

Zbog ograničenja JavaScript-a, Vue nije u stanju da primeti sledeće promene u nizu: direktno postavljanje elementa po indeksu: items[ključ] = novaVrednost i eksplicitnu promenu dužine niza, na primer: items.length = novaDužina.