The index is missing after items are cleared and then restored

[liu-lihao]

Describe the bug

When using RecycleScroller, the index will be lost if the data is cleared and then recovered

Reproduction

https://stackblitz.com/edit/vue-rgi7eq?file=src/components/HelloWorld.vue

vue@3.2.45 vue-virtual-scroller@2.0.0-beta.7

<script>
import { ref } from 'vue';
import { RecycleScroller } from 'vue-virtual-scroller';

export default {
  components: { RecycleScroller },
  setup() {
    const createData = (n) =>
      new Array(n).fill(0).map((_, i) => ({ id: i + 1 }));

    const data = ref(createData(20));
    const clear = () => (data.value = []);
    const recovery = () => (data.value = createData(20));

    setTimeout(clear, 2000);
    setTimeout(recovery, 3000);

    return {
      data,
      clear,
      recovery,
    };
  },
};
</script>

<template>
  <button @click="clear">Clear</button>
  <button @click="recovery">Recovery</button>
  <RecycleScroller
    style="border: 1px solid green; height: 200px; overflow-y: auto"
    v-slot="{ index: rowIndex }"
    :items="data"
    keyField="id"
    :item-size="30"
  >
    <div style="height: 30px">
      <!-- clear -> recovery -> show 'undefined' -->
      {{ rowIndex ?? typeof rowIndex }}
    </div>
  </RecycleScroller>
</template>

System Info

Chrome 108.0.5359.124

Used Package Manager

npm

Validations

• [X] Read the docs.
• [X] Check that there isn't already an issue 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.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[liu-lihao]

I have this problem too!

This was fixed in some release? All the best!

no，I have submitted pr, but ...

This is my current approach:

const items = [{ key }, { key }] // only key
const map = {
  [key]: { item: REAL_ITEM, index }
}

// v-slot={ item }
// <Item  :item="map[item.key].item" :index="map[item.key].index" />

[yeminxuan]

Is this issue unmaintained?

[ZiuChen]

The issue can still be reproduced in 2.0.0-beta.8: https://stackblitz.com/edit/vue-yek9sa?file=package.json,src%2Fcomponents%2FHelloWorld.vue

[zhangcanfeng612]

The issue can still be reproduced in 2.0.0-beta.8

[vsambor]

I just reproduced this. My experience with vue-virtual-scroller was terrible up to now :( When scrolling it does not seem natural and it adds visible white spaces when scrolling a bit faster. The scroll to item does not work correctly (even if the rows have the same dimensions).

[ZiuChen]

This issue can be fixed using pnpm patch as a temporary solution for 2.0.0-beta.8. Unfortunately, I didn't find the relevant code in the next branch.

diff --git a/dist/vue-virtual-scroller.esm.js b/dist/vue-virtual-scroller.esm.js
index 8c5962e80f1b0d9fc9dbe3656b323a88fc57b0a7..6edf02cd48d17d85fe42ddbcfad43fd0f769a62b 100644
--- a/dist/vue-virtual-scroller.esm.js
+++ b/dist/vue-virtual-scroller.esm.js
@@ -600,6 +600,7 @@ var script$2 = {
           // View already assigned to item
           if (!view.nr.used) {
             view.nr.used = true;
+            view.nr.index = i;
             newlyUsedView = true;
             if (unusedPool) {
               const index = unusedPool.indexOf(view);

Problem resolution details:

# If you are using pnpm, then execute in the project root directory:
pnpm patch vue-virtual-scroller@2.0.0-beta.8

# Then complete the modification of the file according to the output instructions, save and execute:
# where `xxx` is the temporary path you just created
pnpm patch-commit xxx

Non-pnpm users can try patch-package

[vsambor]

@ZiuChen thx for the patch. Do you plan to open a PR?

[liu-lihao]

The 2.0.0-beta.8 version was released earlier, looking forward to the next one.

[vsambor]

@Akryum Could you provide insights on the possibility of merging this in the near future?