Reaktivnost u Vue frameworku

Svaka promena podataka iz data dovodi do trenutne promene prikaza tih podataka na stranici. Ovo ponašanje Vue-a se zove reaktivnost.

Hajde da proverimo u praksi. Neka imamo sledeće svojstvo:

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

Prikažimo vrednost ovog svojstva:

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

Napravimo dugme, na čiji klik će se menjati naše svojstvo:

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

Napišimo sada metod, koji će se zvati klikom na dugme i menjati svojstvo:

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

Ako spojimo ceo kod i pritisnemo dugme - tekst na ekranu reaktivno će se promeniti u drugi.

Data je svojstvo text. Prikažite sadržaj ovog svojstva u nekom pasusu.

Data je dugme. Uredite tako da klikom na ovo dugme vrednost svojstva text se reaktivno promeni u drugu.

Data su dva dugmeta. Uredite tako da klikom na prvo dugme vrednost svojstva text se reaktivno promeni u jednu vrednost, a klikom na drugo - u drugu.