[Vue.js] click イベントの記述

イベントのサブスクライブとイベントハンドラの記述を行う場合は、`v-on` を使用します。 <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6AEiMOGaqyr2JfQouIBGV6tFwqOxpD8sbaItyqw49Jy-oZ1yGEZ6_1F6BhRIm_qdGvzqWgbKQzjl5vPXKu5omKpFqhnhKFB8UR8ssuk4Nz12dPA7tTsLSPG6mKrtUAIx9zup9E74Anes/s1600/vuejs.png" imageanchor="1" hidden><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6AEiMOGaqyr2JfQouIBGV6tFwqOxpD8sbaItyqw49Jy-oZ1yGEZ6_1F6BhRIm_qdGvzqWgbKQzjl5vPXKu5omKpFqhnhKFB8UR8ssuk4Nz12dPA7tTsLSPG6mKrtUAIx9zup9E74Anes/s320/vuejs.png" width="320" height="320" data-original-width="400" data-original-height="400" /></a> 例えば以下のように記述します。 ``` <div id="app"> {{count}}<br> <button v-on:click="increment">Increment</button></div>``` ``` new Vue({ el: '#app', data: { count: 0 }, // `methods` オブジェクトの下にメソッドを定義する methods: { increment: function () { this.count++; } } }); ``` `v-on:click` でクリック時のイベントハンドラを指定します。 イベントハンドラ `increment` は `methods` プロパティの下に定義します。 `this` で `data` プロパティにアクセスできます。 ## 引数の渡し方 引数も普通に渡せばいいだけです。 ``` <div id="app"> {{count}}<br> <button v-on:click="increment(2)">Increment</button></div>``` ``` new Vue({ el: '#app', data: { count: 0 }, // `methods` オブジェクトの下にメソッドを定義する methods: { increment: function (value) { this.count += value; } } }); ``` ## イベント引数 引数なしのイベントハンドラに引数を１つ指定すると、イベント引数が渡されます。 ``` <div id="app"> <button v-on:click="helloWorld">Hello World</button></div>``` ``` new Vue({ el: '#app', // `methods` オブジェクトの下にメソッドを定義する methods: { helloWorld: function (event) { alert('Hello World!') // `event` は、ネイティブ DOM イベントです if (event) { alert(event.target.tagName) } } } }); ``` ### 引数ありのイベントハンドラでイベント引数を受け取る 引数ありのイベントハンドラでイベント引数を受け取りたい場合は、`$event` を渡します。 ``` <div id="app"> <button v-on:click="helloWorld('Taro', $event)">Hello World</button></div>``` ``` new Vue({ el: '#app', // `methods` オブジェクトの下にメソッドを定義する methods: { helloWorld: function (name, event) { alert(`Hello ${name}!`) // `event` は、ネイティブ DOM イベントです if (event) { alert(event.target.tagName) } } } }); ``` ## 参考 URL - https://jp.vuejs.org/v2/guide/events.html - https://noumenon-th.net/programming/2019/05/21/v-bind/ - https://qiita.com/rhistoba/items/f7f90b7e59ad0a12e729