Taulukoiden reaktivisuus Vuessa

Reaktivisuus laukeaa jopa taulukoissa tapahtuvissa muutoksissa, joita näytetään v-for:llä. Tehdään esimerkkinä niin, että painiketta painamalla taulukkoon reaktiivisesti lisätään uusi elementti ja muutokset tapahtuvat välittömästi myös näytöllä.

Toteutetaan kuvattu. Olkoon meillä taulukko:

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

Näytetään tämän taulukon elementit loopissa:

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

Tehdään painike, jota painamalla taulukkoon lisätään uusi elementti:

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

Toteutetaan vastaava metodi:

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

Annettu painike. Annettu taulukko. Näytä taulukon elementit listana ul. Tee niin, että painiketta painamalla tämän listan loppuun lisätään uusi kohta.

Annettu painike. Annettu taulukko. Näytä taulukon elementit listana ul. Tee niin, että joka kerta painiketta painettaessa listasta poistetaan ensimmäinen kohta.

Annettu painike. Annettu taulukko. Näytä taulukon elementit listana ul. Tee niin, että joka kerta painiketta painettaessa listasta poistetaan viimeinen kohta.

Annettu painike. Annettu taulukko. Näytä taulukon elementit listana ul. Tee niin, että joka kerta painiketta painettaessa listasta poistetaan toiseksi viimeinen kohta.

Annettu painike. Annettu taulukko. Näytä taulukon elementit listana ul. Tee niin, että painiketta painamalla listan kohdat lajitellaan.

Annettu painike. Annettu taulukko. Näytä taulukon elementit listana ul. Tee niin, että painiketta painamalla listan kohdat asetetaan käänteiseen järjestykseen.

Poikkeukset

JavaScriptin rajoitusten vuoksi Vue ei pysty havaitsemaan seuraavia muutoksia taulukossa: elementin suoraa asettamista indeksin perusteella: items[avain] = uusiArvo ja taulukon pituuden eksplisiittistä muutosta, esimerkiksi: items.length = uusiPituus.