Cannot read property 'removeEventListener' of null -Vue issue?

Here is a fiddle to see my problem. https://jsfiddle.net/45t8umsp/ (After adding the keys, go to home and then to /foo. The destroy method fails)

In the event of beforeDestroy I want clean up the instance with:

beforeDestroy() {
    this.placesInstance.destroy();
},

However, I’m not quite sure, it fails with the error:

TypeError: Cannot read property 'removeEventListener' of null
    at EventEmitter.placesInstance.destroy (app.js:229670)
    at VueComponent.beforeDestroy (app.js:229445)
    at callHook (vendor.js:3348)
    at VueComponent.Vue.$destroy (vendor.js:3127)
    at destroy (vendor.js:4605)
    at invokeDestroyHook (vendor.js:6170)
    at VueComponent.patch [as __patch__] (vendor.js:6508)
    at VueComponent.Vue.$destroy (vendor.js:3150)
    at destroy (vendor.js:4605)
    at invokeDestroyHook (vendor.js:6170)

If I’m aspecting the code, I see the error line:

autocompleteContainer.querySelector(".".concat(prefix, "-input")).removeEventListener('input', inputListener);

But I checked in beforeDestory event the input is still there…

What is wrong?

[Haroenv]

This is the solution: places.js (and autocomplete.js too) modify the DOM to add the container around the input, which makes Vue lose track of the elements, and removes the input, before the beforeDestroy hook is called. The way to go is to make an input with vanilla JS inside a container (so Vue doesn’t control that part at all). The destroying works as expected.

Note however that if you add any listeners yourself, you need to make sure that you remove them in the beforeDestroy hook as well

[pmochine]

@Haroenv Thank you!