tnfe / vue3-infinite-list

一个支持百万数量级的Vue3无限滚动列表组件
https://tnfe.github.io/vue3-infinite-list
224 stars 37 forks source link

Dyanmic data bug #3

Open brianwawok opened 2 years ago

brianwawok commented 2 years ago

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?

brianwawok commented 2 years ago

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