-
Notifications
You must be signed in to change notification settings - Fork 101
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
How to use with props? #16
Comments
In fact, it is possible to modify the prop for the object type, but the point of the prop is not modified inside the component, so update:xxx will not be triggered. In Vue Draggable, only the order of the list is modified. If you simply pass the modelValue as prop, It is also possible to achieve two-way binding. |
I see. If
I'm often confused about whether modifying deep property values is ok / best practice in Vue. But this works for Full working example here: https://stackblitz.com/edit/github-b2xatc-a1fgqc?file=src%2FApp.vue,src%2FDraggable.vue |
Hi again, I've been reading up a little on Vue. And the guide explicitly calls it out as best-practice for a component not to modify parent arrays and objects:
So vue-draggable-plus achieves its prop behavior by modifying the contents of the provided prop array, which is not best practice. I understand that this perhaps is unreasonable to fix, or you may disagree with Vue's official opinion on modifying props, and I'll be fine if you just close this, but I'll let you close it. Perhaps this is something to note in the README.md at least. But I'm fine either way. I understand now. |
I know that this behavior breaks Vue's single-item data flow. Of course, there are other ways to achieve it, or I can deep copy a value and use a watch to monitor its changes and notify the user of updates, but I think it will be more troublesome for users to use this way. So I chose this method. I don't think Vue's official design is unreasonable, but I think that no matter which design method is used, it is for the convenience of users. |
In fact you wouldn't need to do a deep copy or a deep watch - a shallow copy and watch would be enough since you only ever change the top-level array. I can say that for me it was very confusing because I was expecting that I agree that in the end my code is simpler when |
This is not the cause of #15. The problem is that I intercept the onUpdate method, because I need to intercept it and update it internally. In fact, I call the update passed by the user first, and then update the element location, that's what's causing the #15, I don't know what kind of confusion the current problem has caused you? Or what kind of problems do you encounter in use? Or do you simply think it's unreasonable for me to break one-way data flow? |
I totally understand that #15 had a different cause (also evidenced by the fix in 33a73ca) But the reason I discovered #15 was because I expected that I had to use |
If you need to monitor updates, you can use watch to monitor it. If you need to notify the outside when updating internally, then do the same. update is provided by Sortable, it is only used for view update, it does not mean when it is executed, data will be updated. |
In my use case, my component gets the array from a parent component in a prop. Isn't this likely more common in real-world usage than having a data array? What is the best way to use
<VueDraggable>
with a prop? This might be a something to document or an example to show...All the examples use
v-model
, but when I tried that, I get this error:Which does make sense. If I try to use
v-bind
instead, I get:Which is less straight-forward to interpret.
What I've ended up doing is to have a copy of the array prop and then have watchers on both the prop and the copy to update "the other one". But it feels like a hack...
The text was updated successfully, but these errors were encountered: