Component doesn't clean up after itself

[adambullmer]

Expected Behavior

If I am on a page with the parallax component on it, navigate to a new page in the app, I expect the scroll event listener to no longer fire.

Actual Behavior

When I visit a page with the parallax element, and then navigate to another page without it, when I scroll, I get bombarded with console errors. I source dived a little and found that there isn't a defined cleanup for this component, like turning off the scroll event listener.

vue-parallaxy.min.js?ab81:1 Uncaught TypeError: Cannot read property 'getBoundingClientRect' of undefined
    at VueComponent.isInView (vue-parallaxy.min.js?ab81:1)
    at VueComponent.boundFn [as isInView] (vue.esm.js?65d7:182)
    at eval (vue-parallaxy.min.js?ab81:1)
isInView @ vue-parallaxy.min.js?ab81:1
boundFn @ vue.esm.js?65d7:182
(anonymous) @ vue-parallaxy.min.js?ab81:1
requestAnimationFrame (async)
scrollHandler @ vue-parallaxy.min.js?ab81:1
boundFn @ vue.esm.js?65d7:182

Environment

• OS: Mac OSX 10.13.1
• NPM version: Yarn 1.2.0
• vue.js version: 2.4.2
• vue-parallax version: 1.0.3

[damtsnkff]

I believe I still have the issue. (Maybe linked to the fact that I had multiples instances on the same page ?)

I think you should also assign your requestAnimationFrame to a variable so that you can call cancelAnimationFrame to clean up the component entirely.

I believe the right place would be below that line:

vue-parallax/src/components/Parallax.vue

Line 127 in 2f131f2

window.removeEventListener('scroll', this.scrollHandler, false)