イベントリスナーの登録・削除 [Vue.js]

イベントリスナーの登録・削除

ハンドラーをメソッドとして定義し、mounted もしくは、created で登録し、destroyed で削除する。

mounted: function () {
  document.addEventListener(
    'turbolinks:visit',
    this.handler
  )
},
destroyed: function () {
  document.removeEventListener(
    'turbolinks:visit',
    this.handler
  )
},
method: {
  // ...
  handler: function () {
  },
  // ...
},

参考：

Vue.js のmountedでaddEventListenerやsetIntervalするとき、後始末を忘れない – GAミント至上主義

remove event listener in vue – Stack Overflow

removeEventListener does not work – Get Help – Vue Forum

ハンドラを自動削除してくれるプラグイン

参考：

外側をクリックすると閉じるドロップダウンメニュー – Qiita