Comments (8)
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.
from vue-draggable-plus.
I see. If list
is a prop, then the prop itself does not get modified, but the order of elements in the list
array do.
<template>
<VueDraggable
:modelValue="list"
...
>
...
</VueDraggable>
</template>
<script>
...
export default {
props: ['list'],
...
};
</script>
I'm often confused about whether modifying deep property values is ok / best practice in Vue. But this works for vue-draggable-plus
. Gotcha.
Full working example here: https://stackblitz.com/edit/github-b2xatc-a1fgqc?file=src%2FApp.vue,src%2FDraggable.vue
from vue-draggable-plus.
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:
Mutating Object / Array Props
When objects and arrays are passed as props, while the child component cannot mutate the prop binding, it will be able to mutate the object or array's nested properties. This is because in JavaScript objects and arrays are passed by reference, and it is unreasonably expensive for Vue to prevent such mutations.
The main drawback of such mutations is that it allows the child component to affect parent state in a way that isn't obvious to the parent component, potentially making it more difficult to reason about the data flow in the future. As a best practice, you should avoid such mutations unless the parent and child are tightly coupled by design. In most cases, the child should emit an event to let the parent perform the mutation.
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.
from vue-draggable-plus.
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.
from vue-draggable-plus.
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 vue-draggable-plus
would not modify my prop directly, which is why I also filed #15 while trying to listen for updates. Had this non-best-practice (and therefore at least to me surprising) behaviour been documented, it would have saved me some time.
I agree that in the end my code is simpler when vue-draggable-plus
just modifies the prop.
from vue-draggable-plus.
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?
from vue-draggable-plus.
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 @update="listUpdate"
to listen for updates because I was not expecting a component to change my props "behind my back". That led me to discover #15, where I used nextTick()
as a workaround and filed #15.
from vue-draggable-plus.
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.
from vue-draggable-plus.
Related Issues (20)
- 如何获取拖拽组件的数据 HOT 6
- How could I get the new one and the old one with onMove event? HOT 2
- 无法导出props参数类型和各个事件的事件对象类型
- 拖拽改变顺序,UI 变了, 但是数据的顺序没变化? HOT 1
- How can I cancel drag ? HOT 1
- Why when you put a <draggable> in a v-for it breaks the animation and the group inside a v-for doesn't work? HOT 1
- RTL issue
- 克隆 + 双列表拖拽,联合使用时的bug HOT 3
- Drag animation between lists doesn't match drag/drop behavior HOT 1
- 设置 sort 为false 还是能排序 HOT 1
- 当direction="horizontal"时 , 子元素拖动至指定区域外,拖动的子元素位置改变生效,子元素dragend事件失效 HOT 4
- Drag and Drop Outside to a div HOT 1
- Can't figure out how to use with the Primevue Datatable and TreeTable HOT 2
- Moving dynamic components between lists not working, but using cloning works.
- 自定义克隆时,放置的目标顺序错误 HOT 3
- Implementing Restricted Column Movement for Specific Items HOT 3
- 多项拖拽
- Restricted column in custom Clone HOT 3
- 当使用ul、li作为拖拽元素,进行多列表拖拽时元素顺序异常 HOT 5
- firefox 拖动会打开新标签页面 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-draggable-plus.