Cannot read $el of undefined with $refs.vsl for tabs

[8BitJonny]

Basically this Bug again #57

The Bug is back.
I'm sadly not yet able to reproduce the bug within a jsfiddle but when we just imagine that this.$refs.vsl can be undefined then we notice that the current condition in line 271

vue-virtual-scroll-list/dist/index.js

Lines 269 to 272 in fe5226d

	offset = scrollelementRect.top - _elemRect.top;
	} else {
	offset = (vsl.$el || vsl).scrollTop || 0;
	}

in onScroll will fail with the error Cannot read $el of undefined.

When we change the condition to be vsl ? (vsl.$el || vsl).scrollTop : 0; instead then it will successfully scroll back to the top even with no wrapper defined.

A bit more about my setup and more information about the cause

I basically have this setup in nuxt where I have a dynamic url which defines which filter on the list is applied: /inbox as url will show you all inbox items /all will show you all the items and so on.
Now I have a sidebar which lets me navigate between the views/urls via nuxt/vue router this.$router.push({ path: '/all' }). Now while switching back and forth I sometimes get this stacktrace https://imgur.com/a/jocKH2x with my parent component emitting beforeDestroy in between while this plugin is in his mounted function with a set offset but no vsl which leads to this error

I hope I could provide enough detail and maybe I try again to create this jsfiddle for you

[8BitJonny]

Ok, I found out what the issue was in my case:

A few things that are important for the issue:

• the virtual-list component had a key set to the length of the list
• my tabs where based of the url which were caught by nuxt dynamic routes
• I first changed the list based of the new tab that was clicked on and the push the new url (it was only a few milliseconds but still)

This let to the following scenario:

• I update the list that should be displayed based of the new tab that was clicked
• I then push the new url representing the new tab
• But before the new url is loaded it actually first notifies all the way down to the virtual-list that the list to display has changed
• since the virtual-list component is told to completely reload since the key (that was set to the length of the list) changed, it resets everything and looses this.$refs.vsl
• but next render won't really happen since the whole instance is almost in beforeDestroy hook to be able to load the new url
• and then the scroll event is triggered which fails because this.$refs.vsl is undefined

Removing the key that was on the virtual-list as of course then the solution

But still maybe you want to change the condition from (vsl.$el || vsl).scrollTop || 0 to (vsl.$el || vsl).scrollTop || 0 since the || 0 at the end won't catch the undefined value anyway.

[8BitJonny]

Nope, sorry the bug still happens. The last 12 minutes were the happiest but the bug is back...
So how do you feel about my proposal?

[tangbc]

I update condition to offset = (vsl && (vsl.$el || vsl).scrollTop) || 0 avoid js error in new version 1.4.7 .

[8BitJonny]

Thank you very much!