Vue-grid-layout: Vue mutating variables

[ghost]

[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: "x"

found in

---> <GridItem>
       <GridLayout>

Hi, wanted to ask if there is some good way to deal with responsive design. I assume, that there are responsive design demo version of gridlayout. I wanted to fix that, rather easy way, but faced Vue warning above.

How i was, trying to make it responsive, just changing the width of original elements and keeping in mind this.currentLayoutType to recreate original design

Any suggestions how to avoid warning?

data () {
    return {
      layout: [
        {x: 0, y: 0, w: 3, h: 6, i: '0', component: 'graph'},
        {x: 3, y: 0, w: 4, h: 7, i: '1', component: 'graph'},
        {x: 3, y: 0, w: 5, h: 8, i: '2', component: 'graph'}
      ],
      draggable: true,
      resizable: true,
      layoutEditEnabled: true,
      currentLayoutType: LAYOUT_TYPES.full
    }
  },
  methods: {
    responsive () {
      var width = contentContainer.clientWidth
      var multiplyer = 1
      if (width < 500) { // LAYOUT_TYPES.tiny
        if (this.currentLayoutType === 'full') {
          multiplyer = 4
        }
        if (this.currentLayoutType === 'small') {
          multiplyer = 2
        }
        this.currentLayoutType = LAYOUT_TYPES.tiny
      } else if (width < 1000) { // LAYOUT_TYPES.small
        if (this.currentLayoutType === 'full') {
          multiplyer = 2
        }
        if (this.currentLayoutType === 'tiny') {
          multiplyer = 1 / 2
        }
        this.currentLayoutType = LAYOUT_TYPES.small
      } else { // LAYOUT_TYPES.full
        if (this.currentLayoutType === 'tiny') {
          multiplyer = 1 / 4
        }
        if (this.currentLayoutType === 'small') {
          multiplyer = 1 / 2
        }
        this.currentLayoutType = LAYOUT_TYPES.full
      }
      if (multiplyer !== 1) {
        var newlayout = JSON.parse(JSON.stringify(this.layout))
        for (var i = 0; i < newlayout.length; i++) {
          newlayout[i].w *= multiplyer
        }
        this.layout = newlayout
      }
    },

[gmsa]

Hi, we tried to implement responsive design initially, but found some issues and never got around to do it. There is no demo of that.
If you get around to get it working, I don't think the warnings are that important.

Would love a PR with responsive support!

[jredrejo]

Hi @teddyarmagedon did you manage to get a responsive behaviour of the grid?