【Vue.js】イベントハンドラに引数を渡す、$event

はじめに

こんにちは！
今回は【Vue.js】イベントハンドラに引数を渡す方法、$eventについてアウトプットしていきます！

書き方・解説

前記事のメソッドイベントハンドラの内容を例に解説していきます。

HTML

<div id="app">
  <p>
    {{ message }}
  </p>
    <button v-on:click="clickHandler('Vue.ls!')">
    Click!
  </button>
</div>

Vue.js

 var app = new Vue({
   el: "#app",
   data: {
     message: ''
   },
   methods: {
     clickHandler: function(message) {
       this.message = message
     }
   }
 })

動作としては、ボタンをクリックしたらclickHandlerを呼び出す。その時に値(Vue.js!)を出す。
そしてそれを、clickHandler: function(message)の(message)の部分で引数として受け取ります。
それをclickHandler: function(message)内の処理として引数messageをdataオプション内のmessage:''にthis.messageとして代入している。なのでdataオプション内はmassage:'Vue.js!'というふうになっている。それをテンプレート側の{{ message }}で表示させているということになる。

下画像のように、

クリックボタンをクリックすることで、

Vue.js!と表示される処理になる。

「補足」$eventの使い方

上記の場合では第１引数をmessageで使用してしまっているため、イベントオブジェクトを参照出来ないという課題が生じます。
この時、イベントオブジェクトを参照させたいというときは、$eventを引数としてメソッドに渡す。

HTML

<div id="app">
  <p>
    {{ message }}
  </p>
    <button v-on:click="clickHandler($event,'Vue.ls!')">
    Click!
  </button>
</div>

Vue.js

 var app = new Vue({
   el: "#app",
   data: {
     message: ''
   },
   methods: {
     clickHandler: function($event,message) {
       this.message = message
       console.log($event)
     }
   }
 })

これでイベントオブジェクトと引数をイベントハンドラに渡して、利用できるようになります。
console.logはイベントオブジェクトの動作確認として使用しています。

以上、「補足」$eventの使い方でした。

まとめ

このようにイベントハンドラに引数を渡し、処理を実行し、テンプレート側で出力させることが可能です！
イベントオブジェクトを参照出来ないという課題が生じるため、参照させたいときは$eventを引数としてイベントハンドラに渡すことが推奨されます。

最後に

今回はイベントハンドラに引数を渡す方法と$eventについてアウトプットしました。
今回の記事を読んで質問、間違い等あればコメント等頂けると幸いです。

今後ともQiitaにてアウトプットしていきます！

最後までご愛読ありがとうございました！