Does GridLayout mutate props?

[affanshahid]

I'm running the example in the README and noticed in the Vue Devtools that GridLayout is changing the positions (x,y) of elements in the layout data property which is being passed to it as a prop.

Not using .sync so how is it doing this? Is it just simply modifying props which is a Vue anti-pattern it seems, or am I missing something?

[Sector14]

I know this is an old issue but, yes it's modifying props and it does cause issues due to it. We ran into this recently due to the use of passing in some store based data as props.

It would be useful if the props were only modified when using :layout.sync="yourdata" with events you can use to manually handle mutations when using :layout="yourdata".

This is related to https://github.com/jbaysolutions/vue-grid-layout/issues/164

[Valian]

I've lost quite a lot of time trying to track down what is happening. I've changed the layout to use a computed property instead of normal object, and suddenly updates stopped working.

Usually, the easiest solution for such a problem is to copy prop and modify only that copy, optionally sending an updated version with $emit to parent. Why it can't be done this way here?

[hshahid9]

I was having the same issue that the layout position was being changed by GridLayout itself although it should be avoided. The solution that worked for me is

:layout="layout" @layout-updated="layout = $event"