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.