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

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

この課題を解決するには、2つのプロパティが必要です。プロパティ num は入力フィールドへのデータ入力に応じて変更され、プロパティ res には二乗した結果を記録します:

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

次に、入力フィールドを作成し、プロパティ num をバインドし、クリックするとメソッド calc が実行されるボタンと、結果が表示される段落も作成しましょう:

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

メソッド calc の実装を書いてみましょう:

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

メソッド calc が呼び出されると（これはボタンが押されたときに発生します）、プロパティ res に結果が記録され、同時に段落に表示されます。

入力フィールド、ボタン、段落があります。入力フィールドに数値が入力されます。ボタンが押されたときに、その数値の平方根が段落に表示されるようにしてください。

2つの入力フィールド、ボタン、段落があります。各入力フィールドに数値が入力されます。ボタンが押されたときに、これらの数値の合計が段落に表示されるようにしてください。

2つの入力フィールドとボタンがあります。各入力フィールドにテキストが入力されます。ボタンが押されたときに、最初の入力フィールドのテキストが2番目に、 2番目の入力フィールドのテキストが最初に表示されるようにしてください。

入力フィールド、3 つの段落、ボタンがあります。入力フィールドにはスペースで区切ったユーザーの姓名が入力されます。ボタンが押されたときに、最初の段落に姓、2番目の段落に名、 3番目の段落にミドルネームが表示されるようにしてください。