Open
Description
[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
}
},