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:

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

Prikažimo vrednost ovog svojstva:

App.vue<template>
  {{ text }}
</template>

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

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

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

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

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