search

Akryum / vue-virtual-scroller

⚡️ Blazing fast scrolling for any amount of data
https://vue-virtual-scroller-demo.netlify.app
9.36k stars 896 forks source link

Index is non-reactive (@next) #735

Open ishitatsuyuki opened 2 years ago

ishitatsuyuki commented 2 years ago

In the next branch, the index passed to the slot is from the non-reactive field:

https://github.com/Akryum/vue-virtual-scroller/blob/a6e07da79af0165a62fc6fc9bfb8ca08631b25ef/packages/vue-virtual-scroller/src/components/RecycleScroller.vue#L37

I'm seeing that my index-based view widget shows stale element, and I'm assuming that this is caused by this non-reactiveness.

Can you confirm that it can cause updates to be skipped for any index-based computed/templates, and if that's the case, make it properly reactive?

ishitatsuyuki commented 2 years ago

It looks like reactivity isn't really the issue here, but the recycling logic is simply a little too overengineered and decides to reuse an element with a key that doesn't match (or otherwise corrupt internal state). I have locally done a rewrite to simplify the logic to resolve the issue, and I plan to file a PR later.

patchthecode commented 2 years ago

pr? im having similar issue. im getting stale data when i change the data

ishitatsuyuki commented 2 years ago

See https://github.com/Akryum/vue-virtual-scroller/pull/743.

fidalgodev commented 1 year ago

I think I'm getting the same issue. If I keep changing the data sent to items, after a while, the index exposed in the v-slot="{ item, index }" will be outdated and I will get an index related to previous data. Sometimes my items array has a length of 4, and I'm getting that the latest item has the index of 8 for example (related to previous data when my array had a length of 9