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 摘要。