Vue 2 removes former event listeners

[Grafikart]

I'm currently trying VueJS 2 and noticed a change when using it on existing DOM
Indeed everytime VueJS is initialised it will do something on existing DOM and will remove events previously binded outside of VueJS.

// We bind an event
document.querySelector('#demo').addEventListener('click', function () {
    alert("i'm a button")
})

// and it's lost when Vue is binded
new Vue({
    el: '#vuejs'
})

JSFiddle

This same example works fine with VueJS1. I don't have enough understanding of Vue core to understand what changed between the two version of the compiler.js that would explain this change.

[itsMapleLeaf]

Is there a reason why you can't use Vue events instead?

<div id="vuejs">
  <div>
    <button id="demo" @click="var1 += 'a'">Bouton</button>
  </div>
  <div id="demo_content">
    {{ var1 }}
  </div>
</div>

new Vue({
  el: '#vuejs',
  data: {
    var1: 'Hello world'
  }
})

[fnlctrl]

Vue works under the assumption that you do not manipulate dom yourself.

---

Vue 2 retrieves and removes in-dom templates, compiles them to render functions, and render virtual dom back into real dom,
while Vue 1 doesn't remove in-dom templates.

[Grafikart]

That's a pretty stupid use case I know :)

Since it worked before it could be misleading for people migrating to v2. My use case is pretty specific since I use VueJS on a website using Turbolinks (that reloads the entire body every time a link is pressed) and bind a lots of events everywhere.

[fnlctrl]

Such usage was never documented, and it's obviously a hack, so it wouldn't
be a surprise for most people.

On Fri, Sep 2, 2016, 16:17 Grafikart notifications@github.com wrote:

That's a pretty stupid use case I know :)

Since it worked before it could be misleading for people migrating to v2.
My use case is pretty specific since I use VueJS on a website using
Turbolinks (that reloads the entire body every time a link is pressed) and
bind a lots of events everywhere.

—
You are receiving this because you modified the open/close state.

Reply to this email directly, view it on GitHub
#3587 (comment), or mute
the thread
https://github.com/notifications/unsubscribe-auth/AFTLl0SHGGk7LPlXEsVD5hbQEpeNaTXBks5ql9u3gaJpZM4JzdEX
.

[Grafikart]

Thanks ! I'll VueJS all my code :)

[oppianmatt]

what if you're in the process of trying to migrate to vue, but you have some legacy parts in jquery
trying to move to vue now means an all or nothing approach
this bit me trying out my first vue component amongst my legacy components

so what you're saying is that I have to move all of them to vuejs and there is no way to intermingle?

[oppianmatt]

Lucky there is a work around. For anyone else who finds this an easy way to get around it is to attach your listeners when vue mounts your element.

    mounted: function () {
      addHandlers(this.$el);
    },

Vue has created $el in the shadow dom but handlers still work if you do it after mounted.

[imndaiga]

@oppianmatt Could you share a clearer example, I can't tell from the api documentation how best to go about this. I'm currently trying:

var addHandlers = function (el) {
  var button = el.getElementByIdName('tooltip-item')
  button.addEventListener('click', function (event) {
      console.log('clicked ' + event.target)
      ...
    })
  }
}

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
  mounted: function () {
    addHandlers(this.$el)
  }
})

If anyone with better know-how comes across this, please indicate if this approach to event handling is even possible with Vue

[sroberson]

I got this to work by moving the script tag for my pre-existing DOM scripts to be AFTER the vuejs app code.

[oppianmatt]

@squarenomad in your case why aren't you just using @click for the vue handling of a click?

This post was more for legacy js scripts for people who are migrating to vue but with a big codebase of libraries.

But yeah as @sroberson pointed out, attaching your handlers after vuejs has created it's shadow dom works. Whether that's just putting your script tags after (but then your code has to run synchronous), or by attaching your handlers in mounted.

Vue takes over the dom so handlers set before vue has taken over are going to be lost (or strange effects). Also can't really modify the dom elements that vue owns

[DmitryRibalka]

The same thing with select2, if i use Vue.js in a page with Select2 it disables select2 events. How to reenable them?

[oppianmatt]

The wonderful VueJS guide has an example how to wrap an existing js module, and the example they use is select2! https://vuejs.org/v2/examples/select2.html

It uses the very same technique in here by attaching to $el in the mounted stage.