Obtendo dados de formulário por evento em Vue

Suponha que temos um botão e um campo de entrada onde um número é digitado. Vamos, ao clicar no botão, exibir o quadrado do número inserido no campo. Vamos começar a implementação.

Para resolver esta tarefa, precisaremos de duas propriedades. A propriedade num será alterada à medida em que os dados são inseridos no campo, e na propriedade res registraremos o resultado da elevação ao quadrado:

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

Agora, vamos criar o campo de entrada, vincular a ele a propriedade num, criar um botão que, ao ser clicado, executará o método calc, e também criar um parágrafo onde o resultado será exibido:

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

Vamos escrever a implementação do método calc:

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

O resultado será que, assim que o método calc for chamado (o que acontecerá ao pressionar o botão), a propriedade res será preenchida com o resultado e, simultaneamente, será exibida em nosso parágrafo.