Reaktiivsus Vue raamistikus

Iga muutus andmetes data-st põhjustab nende andmete kuvatava väärtuse lehel kohese muutumise. Sellist Vue käitumist nimetatakse reaktiivsuseks.

Kontrollime seda praktikas. Olgu meil järgmine omadus:

data() {
	return {
		text: 'xxx',
	}
}

Kuvame selle omaduse väärtuse:

<template>
	{{ text }}
</template>

Teeme nupu, mille vajutamisel meie omadus muutub:

<template>
	{{ text }}
	<button @click="change">text</button>
</template>

Kirjutame nüüd meetodi, mida kutsutakse välja nupu vajutamisel ja mis muudab omadust:

methods: {
	change: function() {
		this.text = 'yyy';
	}
}

Kui panna kogu kood kokku ja vajutada nupule - muutub ekraanil olev tekst reaktiivselt teiseks.

Antud omadus text. Kuva selle omaduse sisu mõnes lõigus.

Antud nupp. Tehke nii, et klõpsates sellel nupul omaduse text väärtus muutuks reaktiivselt teiseks.

Antud kaks nuppu. Tehke nii, et esimesele nupule klõpsates omaduse text väärtus muutuks reaktiivselt üheks väärtuseks, ja teisele klõpsates - teiseks.