How to update props value by method in vue? So I have props width with default value is 20
<div :style="{ width: width+ 'px'}">
props: {
width: {
type: [String, Number],
default: '20px'
},
}
and then it will rendered the component to width=20px. Can I change the props value by using javascript? Example it might look like this(?)
myEventHandler(e) {
if(window.innerWidth < 768 && this.width === '20')
this.width = '' // I want to revert the value to empty like it never used this props before. But I get vue warn that the prop being mutated
},
Any help would be very helful, thanks!
As stated in the VueJs documentation: https://vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow
This means you should not attempt to mutate a prop inside a child component. If you do, Vue will warn you in the console.
If you really really need to mutate the props, you can try something like: In the child component:
props: {
width: {
type: [String, Number],
default: '20px'
}
},
computed: {
computedWidth: {
get(){
return this.width
},
set(newValue) {
this.$emit('widthChanged', newValue)
}
}
}
In the parent component:
<child-component
:width="width"
@widthChanged="someFunctionWhoMutateYourVar"
>
This should do the work