Vue.js イベントハンドリングまとめ

インラインメソッドハンドラ

簡単な処理であればインラインでメソッドを定義できる。

以下のコードはbutton要素にイベントハンドラv-on:clickを設定し、buttonをクリックするたびに{{ count }}の値が1増えていく。

js

var app = new Vue({
  el: '#app',
  data: {
    count: 0 // countプロパティに0をセット
  }
})

html

<div id="app">
  <p>
    {{ count }}
  </p>
  <button v-on:click="count++">
    Click!
  </button>
</div>

メソッドイベントハンドラ

先ほどの同じ処理をmethodsオプションで定義してみる

this.countでdataオプションに定義したcountにアクセスできる

js

var app = new Vue({
  el: '#app',
  data: {
    count: 0 // countプロパティに0をセット
  },
  methods: { // methodsオプション
    clickHandler() { // メソッドを定義
    this.count++
    }
  }
})

html

<div id="app">
  <p>
    {{ count }}
  </p>
  <button v-on:click="clickHandler">
    Click!
  </button>
</div>

このように、テンプレート(HTML)とロジック(メソッド)は分けたほうがメンテナンス性が良くなる。

また、v-onは@に置き換える省略記法が用意されている

html

<!-- <button v-on:click="clickHandler">と結果は同じ -->
<button @click="clickHandler">
    Click!
</button>

イベントオブジェクト

メソッドの引数にeventオブジェクトを渡すことによって取得できる

js

methods: {
  clickHandler(event) {
  // 〜省略〜
  }
}

次のように、引数に渡すプロパティが存在する場合は、第一引数に$eventを渡すことによって、eventオブジェクトを取得できる

html

<button v-on:click="clickHandler($event, message)">
  Click!
</button>

Vueインスタンス側にも記述する

js

methods: {
  clickHandler($event, message) {
  // 〜省略〜
  }
}

イベント修飾子

.onceはイベントハンドラを1回だけ実行する

html

<!-- 2回目以降はボタンを押しても何も起きない -->
<button v-on:click.once="method">click</button>

その他にもイベント処理を中断する.preventなど、様々なイベント修飾子が用意されている。