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:

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

Izpišimo elemente tega polja v zanki:

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

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

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

Implementirajmo ustrezno metodo:

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

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.

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.

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.

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.

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.

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.