Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rendering order is incorrect when changing data-sources array #403

Open
charlesg99 opened this issue Feb 25, 2023 · 1 comment
Open

Rendering order is incorrect when changing data-sources array #403

charlesg99 opened this issue Feb 25, 2023 · 1 comment
Labels

Comments

@charlesg99
Copy link

Describe

Based on the example found here. When changing the order of the items in the data-sources, we can see in the vue devtools that the VirtualListItem are correctly updated, but aren't displayed in the order of their index property. I suspect this has to do with the patch strategy and it only happens when the items list comes from a computed property (so the data-sources array itself changes over time). Even if the array coming from the computed property changes, I would expect the items in the virtual list to be in the right order since the unique key and the object itself don't change.

Reproduce demo

If this example, looking at the console indicates that the items have the correct order, they just aren't displayed correctly. By using the array from the component's data instead of the computed property (replace data-sources="orderedModels" with data-sources="models") the reordering works correctly.

https://codesandbox.io/s/live-demo-virtual-list-forked-ezjcqr?file=/src/App.vue

@charlesg99 charlesg99 added the bug label Feb 25, 2023
@charlesg99
Copy link
Author

Setting the key explicitly on the VirtualListItem vnodes fixes the issue. To do so I added key: uniqueKey, to the getRenderSlots function. This doesn't seem to impact performances (from what I can see).

Is there a way to accomplish this without modifying the library? Or better yet have my demo work without setting the vnode key?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant