Reaktivita vo frameworku Vue

Akákoľvek zmena údajov z data vedie k okamžitej zmene zobrazenia týchto údajov na stránke. Takéto správanie Vue sa nazýva reaktivita.

Vyskúšajme si to v praxi. Predpokladajme, že máme nasledujúcu vlastnosť:

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

Vypíšme hodnotu tejto vlastnosti:

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

Vytvorme tlačidlo, pri ktorého kliknutí sa zmení naša vlastnosť:

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

Teraz napíšme metódu, ktorá sa bude volať pri kliknutí na tlačidlo a zmení vlastnosť:

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

Ak spojíme celý kód spolu a klikneme na tlačidlo - text na obrazovke sa reaktívne zmení na iný.

Daná vlastnosť text. Vypíšte obsah tejto vlastnosti v nejakom odseku.

Dané tlačidlo. Zabezpečte, aby sa pri kliknutí na toto tlačidlo hodnota vlastnosti text reaktívne zmenila na inú.

Dané dve tlačidlá. Zabezpečte, aby sa pri kliknutí na prvé tlačidlo hodnota vlastnosti text reaktívne zmenila na jednu hodnotu, a pri kliknutí na druhé - na druhú.