Reaktivnost polj v Vue

Reaktivnost deluje tudi pri spreminjanju polj, ki so izpisana z v-for. Za primer naredimo tako, da se ob kliku na gumb v polje reaktivno doda nov element in spremembe takoj prikažejo tudi na zaslonu.

Implementirajmo opisano. Naj imamo polje:

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

Izpišimo elemente tega polja v zanki:

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

Naredimo gumb, ob kliku na katerega se v polje doda nov element:

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

Implementirajmo ustrezno metodo:

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

Задание 1

Podan je gumb. Podano je polje. Izpišite elemente tega polja kot seznam ul. Naredite tako, da se ob kliku na gumb na konec tega seznama doda nov element.

Задание 2

Podan je gumb. Podano je polje. Izpišite elemente tega polja kot seznam ul. Naredite tako, da se ob vsakem kliku na gumb iz seznama izbriše prvi element.

Задание 3

Podan je gumb. Podano je polje. Izpišite elemente tega polja kot seznam ul. Naredite tako, da se ob vsakem kliku na gumb iz seznama izbriše zadnji element.

Задание 4

Podan je gumb. Podano je polje. Izpišite elemente tega polja kot seznam ul. Naredite tako, da se ob vsakem kliku na gumb iz seznama izbriše predzadnji element.

Задание 5

Podan je gumb. Podano je polje. Izpišite elemente tega polja kot seznam ul. Naredite tako, da se ob kliku na gumb elementi seznama uredijo.

Задание 6

Podan je gumb. Podano je polje. Izpišite elemente tega polja kot seznam ul. Naredite tako, da se ob kliku na gumb elementi seznama razvrstijo v obratnem vrstnem redu.

Izjeme

Zaradi omejitev JavaScripta, Vue ne more zaznati naslednjih sprememb v polju: neposredno nastavitev elementa po indeksu: items[ključ] = novaVrednost in eksplicitno spreminjanje dolžine polja, na primer: items.length = novaDolžina.