Avoid mutating a prop directly since the value will be overwritten whenever the parent ...
错误:[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 bei
·
错误:[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: "grants" (found in component )
出错原因:
父组件:
子组件:
使用了element UI的transfer穿梭框组件,绑定了已授权的角色id,从父组件传导子组件的prop中
此时如果操作赋权,将会改变绑定的grants属性,引起以上报错信息。子组件中更改绑定的prop值最好使用计算属性computed解决。
解决方式:
computed: {
grants_: {
get() {
return this.grants;
},
set(val) {
//grants_改变由父组件控制
this.$emit("on-change-grant", val);
}
}
}
将绑定的grants改为绑定计算属性值grants_,此时的set方法不能写 this.grants = val,这样和直接绑定prop中的grants有什么两样呢?所以,最好要将此时的grants_改变交给父组件控制,通过父组件来改变prop的grants值。完美解决这个错误。
父组件中修改:
methods里面添加:
表达能力有限,第一次遇到这个问题所以将它写在博客中,将错误原因和解决方式截图显示出来方便大家理解,有什么不对的地方大家可以评论我一起学习。
更多推荐
已为社区贡献2条内容
所有评论(0)