Component doesn't clean up after itself
Closed this issue · 1 comments
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
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