イベントが振ってあるDOMをelに指定してVueのインスタンスにするとイベントは引き継がれず消える 💻

f:id:kimizuka:20200820121014p:plain

普通はこんなことしないと思うのですが、

<button id="app">{{ name }}</button>

document.getElementById('app').addEventListener('click', () => {
  console.log('click!');
});

const vue = new Vue({
  el: '#app',
  data: {
    name: 'vue'
  }
});

という感じで、イベントを振ったDOMを引数にしてVueのインスタンスを生成すると、DOMに振ってあったイベントは消えます。
Vueの仕組みを考えると当たり前といえば当たり前です。

まあ、普通に@clickをつかってVue側で設定すれば良いのですが、のっぴきならない事情でそうもいかない時があるかもしれません。僕はありました。
そんな、のっぴきならない場合は、直接イベントを貼らずにdelegateのような処理を書きましょう。

document.addEventListener('click', (evt) => {
  if (evt.target.id === 'app') {
    console.log('click!');
  }
});

const vue = new Vue({
  el: '#app',
  data: {
    name: 'vue'
  }
});