Извличане на данни от формуляр при събитие във 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 ще се запише резултатът и в същото време ще се изведе в нашия абзац.