Получение данных формы по событию в 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 запишется результат и при этом одновременно выведется в нашем абзаце.