vue3-infinite-list
vue3-infinite-list copied to clipboard
Dyanmic data bug
Dynamic data seems to not be 100%.
Let's say I have a list of 10000 items, and a search bar.
I start typing in search bar, which shrinks my data to say 100 items. Vue3-infinite-list crashes with:
Uncaught (in promise) Error: Requested index 28 is outside of range 0..28 at SizeAndPosManager.getSizeAndPositionForIndex (vue3-infinite-list.es.js:90:1) at Proxy.getItemStyle (vue3-infinite-list.es.js:344:39) at vue3-infinite-list.es.js:524:32 at renderList (runtime-core.esm-bundler.js:6497:1) at Proxy._sfc_render (vue3-infinite-list.es.js:521:70) at renderComponentRoot (runtime-core.esm-bundler.js:893:1) at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5098:1) at ReactiveEffect.run (reactivity.esm-bundler.js:167:1) at updateComponent (runtime-core.esm-bundler.js:4968:1) at processComponent (runtime-core.esm-bundler.js:4901:1)
I think the logic needs to be adjusted to deal with being scrolling past the end of the data?
I fixed it by adding:
:key="'search-' + search"
to my <InfiniteList.
so as my search change, my component is recreated.
I see in the source there is a watcher on :data, but it is missing something.. was not able to narrow down how to tweak this to make a better PR