Remove DOM manipulation and set list in onAdd and onRemove #78
Conversation
|
|
||
| function getListFromEl(el: HTMLElement) { | ||
| const key = Object.keys(el).find(key => key.startsWith('Sortable')); | ||
| return key && (el as any)[key]?.__list; |
There was a problem hiding this comment.
This is a little bit ugly, but I need to have access to the original list to get the exact same object, not a clone. Cloning removes any getter and setter logic, thus kills reactivity.
There was a problem hiding this comment.
But at least with this approach we rely on native Vue rerender instead of DOM manipulation 🤔
MartinMalinda
force-pushed
the
remove-add-reactivity
branch
from
0688a36
to
c55d025
Compare
|
If that's the case, we are changing the reference to the original array. Essentially, we are performing operations like adding, deleting, or moving elements within the original array. If we forcefully change the reference to the array, it could potentially lead to unnecessary issues, such as watch deep. |
|
I'm very frequently doing Besides, the code is already changing the reference to the original array on the most common operation, changing order: |
Because ref is unpacked in the directive, isRef is used in useDraggable
Manual manipulation of the DOM is necessary to trigger the animation effect. |
|
Thanks for the reply, I'll close this and proceed with forking. |
Should close #77
Maybe I've removed too much stuff? I am not sure what are the checks for
isRef? Isn't it safe to assume the list will always be aref? Should the lib work with non reactive arrays (why?)?