SlotProp index of RecycleScroller is undefined

[souphuhn]

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 <recycle-scroller :items="items">

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 <dynamic-scroller>.
If I use Math.random() as IDs, then my example also works with <recycle-scroller>. I have no clue...

@Akryum Did I misunderstood something? Did I use something wrong? Could you have a check?! Thanks appreciate.

Reproduction

<template>
    <recycle-scroller v-slot="{ active, item, index }" class="scroller" :items="items" :item-size="32" key-field="id">
        <div>{{ index }}{{ active }}{{ item }}</div>
    </recycle-scroller>
</template>

<script lang="ts" setup>
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;
});
</script>

<style lang="scss" scoped>
.scroller {
    width: 100%;
    height: 100%;
}
</style>

System Info

"vue": "3.3.7",
"scroller": v2.0.0-beta.8,

Used Package Manager

npm

Validations

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[souphuhn]

Ok it is related to #784