Do not support Vue 2.1.10 perfectly [Vue warn]: Avoid mutating a prop

[liangbizhi]

I use Vue 2.1.10，but get this error in GridItem.vue?2479:253:

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "isDraggable" 
(found in component <GridItem> at C:\projects\JBAY\vue-grid-layout\src\GridItem.vue)

please support this vue.js new feature up to date, thanks a lot

[MarceauKa]

Same here!

[gmsa]

That's not an error, it's a warning. The grid will keep working as expected.

[Cannonb4ll]

Same here, seems not the way to go.

[eeve]

+1

[neithere]

+1. Why not just copy the prop to data?

[o2-web]

+1

[fruitSandwich]

+1

[SergeyKhval]

@gmsa I think this should be reconsidered one more time. The most basic case that comes to mind is that it will enable passing layouts from computed properties like this

var testLayout = [
        {"posX":0,"y":0,"w":2,"h":2,"i":"0"},
        {"posX":2,"y":0,"w":2,"h":4,"i":"1"},
        {"posX":4,"y":0,"w":2,"h":5,"i":"2"},
        {"posX":6,"y":0,"w":2,"h":3,"i":"3"},
        {"posX":8,"y":0,"w":2,"h":3,"i":"4"},
        {"posX":10,"y":0,"w":2,"h":3,"i":"5"},
        {"posX":0,"y":5,"w":2,"h":5,"i":"6"},
        {"posX":2,"y":5,"w":2,"h":5,"i":"7"},
        {"posX":4,"y":5,"w":2,"h":5,"i":"8"},
        {"posX":6,"y":4,"w":2,"h":4,"i":"9"},
        {"posX":8,"y":4,"w":2,"h":4,"i":"10"},
        {"posX":10,"y":4,"w":2,"h":4,"i":"11"},
        {"posX":0,"y":10,"w":2,"h":5,"i":"12"},
        {"posX":2,"y":10,"w":2,"h":5,"i":"13"},
        {"posX":4,"y":8,"w":2,"h":4,"i":"14"},
        {"posX":6,"y":8,"w":2,"h":4,"i":"15"},
        {"posX":8,"y":10,"w":2,"h":5,"i":"16"},
        {"posX":10,"y":4,"w":2,"h":2,"i":"17"},
        {"posX":0,"y":9,"w":2,"h":3,"i":"18"},
        {"posX":2,"y":6,"w":2,"h":2,"i":"19"}
    ];

new Vue({
  computed: {
    layout: {
      get(){
        return testLayout.map((item) => Object.assign({}, item, {x: item.posX}))
      },
    }
  },
});

You can see what happens now if I try to pass layout like this here. Layout does not react to dragging items.

This will also make working with APIs and state management libraries way easier

[gmsa]

Alright, will take a look at it whenever I have some time

[SergeyKhval]

I have played with this issue a bit, but have a strange behavior. The grid starts to work correctly only after I manually update any prop on grid-layout e.g. is-draggable. Before that grid-items do not rerender properly, though it seems that model updates correctly

[nosizejosh]

+1

[havietduc91]

+1 Same issue with @SergeyKhval, anyone has workaround solutions here, please?