Massiivide reaktiivsus Vue'is

Reaktiivsus töötab isegi massiivide muutmistel, mida kuvatakse läbi v-for. Teeme näiteks nii, et nupu vajutamisel lisatakse massiivi reaktiivselt uus element ja muutused toimuvad kohe ka ekraanil.

Rakendame kirjeldatu. Olgu meil massiiv:

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

Kuvame selle massiivi elemendid tsüklis:

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

Teeme nupu, mille vajutamisel massiivi lisatakse uus element:

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

Rakendame vastava meetodi:

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

Antud nupp. Antud massiiv. Kuva massiivi elemendid loendina ul. Tee nii, et nupu vajutamisel lisatakse selle loendi lõppu uus punkt.

Antud nupp. Antud massiiv. Kuva massiivi elemendid loendina ul. Tee nii, et iga kord nupu vajutamisel loendist eemaldatakse esimene punkt.

Antud nupp. Antud massiiv. Kuva massiivi elemendid loendina ul. Tee nii, et iga kord nupu vajutamisel loendist eemaldatakse viimane punkt.

Antud nupp. Antud massiiv. Kuva massiivi elemendid loendina ul. Tee nii, et iga kord nupu vajutamisel loendist eemaldatakse eelviimane punkt.

Antud nupp. Antud massiiv. Kuva massiivi elemendid loendina ul. Tee nii, et nupu vajutamisel loendi punktid sorteeritakse.

Antud nupp. Antud massiiv. Kuva massiivi elemendid loendina ul. Tee nii, et nupu vajutamisel loendi punktid paigutatakse vastupidises järjekorras.

Erandid

JavaScripti piiratuste tõttu ei suuda Vue märgata massiivis järgmisi muutusi: otsest elemendi määramist indeksi järgi: items[võti] = uusVäärtus ja massiivi pikkuse selget muutmist, näiteks: items.length = uusPikkus.