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:

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

Prikažimo elemente ovog niza u petlji:

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

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

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

Implementirajmo odgovarajuću metodu:

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

Задание 1

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.

Задание 2

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.

Задание 3

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.

Задание 4

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.

Задание 5

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.

Задание 6

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.