Akryum / Akryum/vue-virtual-scroller

SlotProp index of RecycleScroller is undefined

未关闭
#867 2 条评论 1 个 reaction 已指派 0 人 在 GitHub 查看
bug
主要语言
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

```


{{ index }}{{ active }}{{ item }}

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 还没有评估数据。

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。