RecycleScroller does not update with items change about vue-virtual-scroller

[guizoxxv]

Nervermind. I just realized I missed this part in the documentation: "use computed props or watchers to properly react to props changes!".

Thank you.

[knidhi]

@guizoxxv I m also facing this issue after migrating to vue3.
How did you solve the issue?

[guizoxxv]

@knidhi

I used a computed property in the RecycleScroller items prop. I copied the array value using the spread operator (shallow copy was enought for me).

computed: {
  list() {
    return [...this.users];
  },
},

Here is a demo: https://stackblitz.com/edit/vue-sq6hfb?file=src%2FApp.vue

[knidhi]

@guizoxxv Thanks for your reply! Shallow copying worked for me too.
But the issue you reported seems valid to me. Mutating the users array to propagate updates is what Vue recommends and the newly added user is displaying when we render the list without virtual scroller.
We should not have to create a new array like this.

[srackhall]

For addition, it is indeed useful, but for deletion, it does not have an effect (simple views may be effective, as shown in the above figure).

Especially for complex elements (such as nested virtual scrolling), repeated folding may occur. As shown in the above figure, due to the fact that the dom element has not been recycled, when the element is complex, it will still be displayed overlapping in the left view.

Here is a demo: https://stackblitz.com/edit/vue-qpzbjg?file=src%2FApp.vue
It can be observed in F12 that the corresponding dom was not immediately correctly reclaimed, thus still causing a bug of view overlap(The elements in the example are relatively simple and cannot be observed from the view).

[srackhall]

I think this issue should be reopened because there is still a possibility of errors during the deletion process (although the probability is very low)