Получение данных формы по событию в Vue

Пусть у нас есть кнопка и инпут, в который вводится число. Давайте по нажатию на кнопку выведем квадрат введенного в инпут числа.

Для решения задачи нам понадобится два свойства. Свойство num будет изменяться по мере ввода данных в инпут, а в свойство res мы будем записывать результат возведения в квадрат:

App.vuedata()
{
    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:

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

Получится, что как только будет вызван метод calc (а это случится по нажатию на кнопку), в свойство res запишется результат и при этом одновременно выведется в нашем абзаце.