Pridobivanje podatkov obrazca po dogodku v Vue

Recimo, da imamo gumb in vnosno polje, v katerega vnesemo številko. Ob pritisku na gumb izpišimo kvadrat vnesene številke v vnosno polje. Lotimo se izvedbe.

Za rešitev problema bomo potrebovali dve lastnosti. Lastnost num se bo spreminjala med vnosom podatkov v vnosno polje, v lastnost res pa bomo zapisali rezultat kvadriranja:

javascriptdata() {
  return {
    num: 0,
    res: 0
  }
}

Zdaj naredimo vnosno polje, povežimo z njim lastnost num, naredimo gumb, ob kliku na katerega bo izvedena metoda calc, in naredimo tudi odstavek, v katerega bo izpisan rezultat:

App.vue<template>
  <p>{{ res }}</p>
  <input v-model="num">
  <button v-on:click="calc">work</button>
</template>

Zdaj napišimo implementacijo metode calc:

javascriptmethods: {
  calc: function() {
    this.res = this.num ** 2;
  }
}

Izkazalo se bo, da takoj ko bo klicana metoda calc (kar se bo zgodilo ob pritisku na gumb), bo v lastnost res zapisan rezultat in se bo hkrati prikazal v našem odstavku.