search

Alfred-Skyblue / vue-draggable-plus

Universal Drag-and-Drop Component Supporting both Vue 3 and Vue 2
https://vue-draggable-plus.pages.dev/en/
MIT License
2.71k stars 106 forks source link

fix: `update:model-value` not triggering on add and remove #138

Closed NicolaiHorlacher closed 1 month ago

NicolaiHorlacher commented 1 month ago

When onAdd and onRemoved is triggered the list got updated in-place. This leads to an undesired prop manipulation in the VueDraggable component, because the writable computed that manages the update:model-value emit isn't triggered trough in-place updates of arrays.

The onUpdate method already had a fix to sidestep this behavior. So, I applied it to onAdd and onRemoved also.

While testing I noticed that the onRemove method is reverting the SortableJS DOM manipulation only when clone mode is active. SortableJS removes the DOM element in any case, so insertNodeAt needs to be called outside of the if-statement.

In conclusion:

These changes streamline the behavior of the composable with writable computeds and fixes missing update:model-value emits. By extension it's now possible to use the component with :model-value when automatic updates of the list are not desired.

netlify[bot] commented 1 month ago

Deploy Preview for vue-draggable-plus ready!

Name Link
Latest commit 47a60c9550b5fd172a2ffaf5fcaa1616140c9e56
Latest deploy log https://app.netlify.com/sites/vue-draggable-plus/deploys/664a1721bd01f200088437e4
Deploy Preview https://deploy-preview-138--vue-draggable-plus.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Alfred-Skyblue commented 1 month ago

Thanks!

Alfred-Skyblue commented 1 month ago

close #77

NicolaiHorlacher commented 1 month ago

Oh, didn't notice there was an issue already. Thanks for the quick merge.