Преузимање података форме по догађају у Vue

Претпоставимо да имамо дугме и уносни поље, у које се уноси број. Хајде да при клику на дугме изађемо квадрат унетог броја у уносном пољу. Приступимо имплементацији.

За решавање задатка биће нам потребна два својства. Својство num ће се мењати током уноса података у уносни поље, а у својство res ћемо уписати резултат квадрирања:

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

Хајде сада да направимо уносни поље, вежимо га за својство num, направимо дугме, по клику на које ће се извршити метод calc, и направимо такође пасус, у који ће се исписати резултат:

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

Хајде да напишемо имплементацију метода calc:

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

Добија се да чим се позове метод calc (а то ће се догодити притиском на дугме), у својство res уписаће се резултат и при томе истовремено ће се приказати у нашем пасусу.