【Vue.js】 メソッドイベントハンドリングで引数に event と任意の引数を渡す方法
やりたいこと
Vue.js
のtemplate言語ブロックでイベントハンドリングするときに、引数でeventとその他の引数もメソッドへ渡す必要性が出てきました。ですので、調査を行いました。
環境
- Node.js v14.5.0
- npm v6.14.6
- Vue v2.6.11
方法
調べてみると以下の二通りの方法を見つけました。
<button @click="handler($event, foo)"></button>
<button @click="e => { handler(e, foo) }"></button>
サンプルコード
二つの方法を見つけたのでそれぞれに対してサンプルコードを作成して動かしてみることにしました。
$eventを利用する方式
@click="handler($event, foo)
をbuttonタグに設定することで、イベントを損なわないまま、二つ目の引数を利用することができるようになります。
今回の場合はdataに定義されているfoo
というプロパティの中の文字列の'foo'
がmethodsのhandler関数に渡ります。
$event
が急に現れましたが、このように書いておくことで、methodsのhandler関数の一つ目の引数でボタンをクリックすることのイベントを渡すことができます。
<template> <button @click="handler($event, foo)">押すたびにfooが渡る</button> </template> <script> export default { data() { return { foo: 'foo' } }, methods: { handler(event, foo) { console.log(event, foo) } } } </script>
ファイルを実行してブラウザで開いてみます。開発者ツールのコンソールを開きつつ、ボタンがあるので押してみるとMouseEvent
と"foo"
という二つの変数が渡っていることが確認できます。
アロー関数方式
こちらの方式では、buttonタグに@click="e => handler(e, bar)"
を設定しています。e => handler(e, bar)
だけをいるとアロー関数式を定義していることがわかるかと思います。以下のような関数定義を似ているかと思います。
const @click = function (e) { return handler(e, bar) }
ともかくこの方法を使うことでも、buttonをクリックした時に発生するイベントを変数として損なわないまま、barという変数もmethodsのhandler関数に渡すことができます。
<template> <button @click="e => handler(e, bar)">押すたびにbarが渡る</button> </template> <script> export default { data() { return { bar: 'bar' } }, methods: { handler (e, bar) { console.log(e, bar) } } } </script>
作成実行してみるとMouseEvent
と'bar'
の二つの変数がmethodsのhandler関数に渡りconsoleのログとして表示されていることを確認することができます。
どちらがいいの?
二つの方式を見つけましたが、どちらのがいいのでしょうか?気になると思います。私もそう思います。特にどちらがよいということも公式ドキュメントには載っていないので未知のままとなります。
しかし、$eventを利用する方式の方は、インラインステートメントハンドラとして公式ドキュメントにそれっぽく記入されているので、知名度的にニッチなアロー関数式を利用するのではなく、$eventを利用する方式を利用する方がいいのかもしれません。
参考
- イベントハンドリング — Vue.js, 入手先 https://jp.vuejs.org/v2/guide/events.html
- Passing event and argument to v-on in Vue.js - Stack Overflow, 入手先 https://stackoverflow.com/questions/40956671/passing-event-and-argument-to-v-on-in-vue-js
- 作者:MIO
- 発売日: 2018/05/29
- メディア: Kindle版