You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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?
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 theVirtualListItem
are correctly updated, but aren't displayed in the order of theirindex
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 thedata-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"
withdata-sources="models"
) the reordering works correctly.https://codesandbox.io/s/live-demo-virtual-list-forked-ezjcqr?file=/src/App.vue
The text was updated successfully, but these errors were encountered: