Vueでのイベントによるフォームデータの取得

ボタンと数値を入力する入力フィールドがあるとします。 ボタンが押されたときに、入力フィールドに入力された数値の二乗を表示しましょう。 実装に取り掛かりましょう。

この課題を解決するには、2つのプロパティが必要です。 プロパティ 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 に結果が記録され、同時に段落に表示されます。