Akryum / Akryum/vue-virtual-scroller
SlotProp index of RecycleScroller is undefined
- 主要语言
- TypeScript
- 星标
- 10.8k
- 派生
- 973
- PR 合并指标
- 30 天内没有已合并 PR
描述
### Describe the bug
Hi,
I have found a bug in the `RecycleScroller`. It is reproducible by my provided example.
If I re-compute my items array in ``
from e.g.
`[{id: '0'}, {id: '1'}, {id: '2'}]`
to
`[{id: '0'}, {id: '1'}, {id: '2'}, {id: '3'}, {id: '4'}, {id: '5'}`]
then the **index** inside the slotProps `{index, item, active}` for the last 3 items **{id: '3'}**, **{id: '4'}**, **{id: '5'}** is **undefined**.
Another example:
If I re-compute my items from e.g.
`[{id: '0'}, {id: '1'}, {id: '2'}]`
to
`[{id: '3'}, {id: '4'}, {id: '5'}, {id: '6'}, {id: '7'}, {id: '8'}`]
then the **index** inside the slotProps `{index, item, active}` for the first items **{id: '3'}**, **{id: '4'}**, **{id: '5'}** is **undefined**.
My example works perfectly with the ``.
If I use `Math.random()` as IDs, then my example also works with ``. I have no clue...
@Akryum Did I misunderstood something? Did I use something wrong? Could you have a check?! Thanks appreciate.
### Reproduction
```
import { computed, ref, onMounted, nextTick } from 'vue';
// @ts-ignore No d.ts exist
import { RecycleScroller, DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller';
const reduced = ref(false);
const items = computed((): { id: string }[] => {
const arr: IdentifiableItem[] = [];
if (reduced.value) {
for (let i = 0; i < 3; i += 1) {
arr.push({ id: `${i}` });
}
} else {
for (let i = 0; i < 6; i += 1) {
arr.push({ id: `${i}` });
}
}
return arr;
});
onMounted(async () => {
await nextTick();
reduced.value = true;
await nextTick();
reduced.value = false;
});
.scroller {
width: 100%;
height: 100%;
}
```
### System Info
```shell
"vue": "3.3.7",
"scroller": v2.0.0-beta.8,
```
### Used Package Manager
npm
### Validations
- [X] Read the [docs](https://github.com/Akryum/vue-virtual-scroller/blob/master/packages/vue-virtual-scroller/README.md).
- [X] Check that there isn't [already an issue](https://github.com/Akryum/vue-virtual-scroller/issues) that reports the same bug to avoid creating a duplicate.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/Akryum/vue-virtual-scroller/discussions).
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.
贡献指南
这个仓库没有索引到贡献指南
评估
这个 Issue 还没有评估数据。