v-onディレクティブに引数を渡すのは非常に簡単です。
引数を渡す前
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Vue.js App</title> <link rel="href + exp" href="main.css"> </head> <body> <div id="app"> <p>現在{{ number }}回クリックされています</p> <button v-on:click="countUp">カウントアップ</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="sample.js"></script> </body> </html>
new Vue({ el: '#app', data: { number: 0, x: 0, y: 0 }, methods: { countUp: function() { this.number += 1 } } })
このような表示になっています。 ボタン押下時にカウント数が1ずつ増加していきます。
今回の変更
さて、ここでcountUpメソッドに引数を渡して、1クリックでのカウントを3倍にしてみましょう。
html側のcountUpに3という数値を渡します。
<div id="app"> <p>現在{{ number }}回クリックされています</p> <button v-on:click="countUp(3)">カウントアップ</button> </div>
続いて、jsはこのように変更します
new Vue({ el: '#app', data: { number: 0, x: 0, y: 0 }, methods: { countUp: function(times) { // timesとして数値を受け取る this.number += 1 * times // timesを掛ける } } })
これで、1クリックで3ずつインクリメントされるようになりました！ 引数を渡すのも直感的でわかりやすいですね！
さらに発展（eventを取得する）
eventオブジェクトに起因するデータに対して、引数を元に何らかの処理を加えたいケースもありますよね。
その場合は、渡したい引数に加えて、$eventを引数に加えます。
渡す位置に決まりはなく、順不同です。
例えば、テキストにマウスカーソルを当てたときに、そのカーソルのブラウザ上の位置を取得してX座標、Y座標として表示したいとき。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Vue.js App</title> <link rel="href + exp" href="main.css"> </head> <body> <div id="app"> <p v-on:mousemove="changeMousePosition">マウスを載せてください</p> <p>X: {{x}}, Y: {{y}}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="sample.js"></script> </body> </html>
new Vue({ el: '#app', data: { number: 0, x: 0, y: 0 }, methods: { changeMousePosition: function(event) { this.x = event.clientX; this.y = event.clientY; } } })
では、引数を渡してこの座標を半分にしてみましょう。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Vue.js App</title> <link rel="href + exp" href="main.css"> </head> <body> <div id="app"> <p v-on:mousemove="changeMousePosition(2, $event)">マウスを載せてください</p> <p>X: {{x}}, Y: {{y}}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="sample.js"></script> </body> </html>
new Vue({ el: '#app', data: { number: 0, x: 0, y: 0 }, methods: { changeMousePosition: function(divideNum, event) { this.x = event.clientX / devideNum; this.y = event.clientY / devideNum; } } })
htmlファイルでは、$eventという特別な変数を用いています。
これで、Vueで定義したメソッドにDOMイベントを渡すことができるようになります。
