错误:[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里面添加:

表达能力有限,第一次遇到这个问题所以将它写在博客中,将错误原因和解决方式截图显示出来方便大家理解,有什么不对的地方大家可以评论我一起学习。

Avoid mutating a prop directly since the value will be overwritten whenever the parent ...相关推荐

  1. Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-

    原因: 子组件改了父组件的值 避免修改父组件传过来的值 注意: 如果value是obj,需要进行深拷贝. 可以参考: https://blog.csdn.net/u013948858/article/ ...

  2. vue使用prop通信出错:Avoid mutating a prop directly since the value will be overwritten whenever the parent

    使用props进行父子组件通信时产生错误:Avoid mutating a prop directly since the value will be overwritten whenever the ...

  3. uni-app:Avoid mutating a prop directly since the value will be overwritten whenever the parent

    Avoid mutating a prop directly since the value will be overwritten whenever the parent component re- ...

  4. Avoid mutating a prop directly since the value will be overwritten whenever the parent component...

    Avoid mutating a prop directly since the value will be overwritten whenever the parent component re- ...

  5. [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever...

    报错 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the paren ...

  6. Avoid mutating a prop directly since the value will be overwritten whenever

    Avoid mutating a prop directly since the value will be overwritten whenever the parent component re- ...

  7. VUE报错:Avoid mutating a prop directly since the value will be overwwritten whenever the parent及解决方案

    VUE报错: [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the p ...

  8. 报错信息:Avoid mutating a prop directly since the value will be overwritten

    报错信息:Avoid mutating a prop directly since the value will be overwritten whenever the parent componen ...

  9. avoid mutating a prop directly since the value will be overwritten whenever完美解决

    在vue父组件传递数据给子组件时候,通过双向绑定给属性赋值时候,报错如下:Avoid mutating a prop directly since the value will be overwrit ...

最新文章

  1. Ubuntu Server 更改hostname
  2. SQL CROSS JOIN
  3. 005_JDK的Date类对Comparable接口的实现
  4. 登录抓包逆向分析学习笔记
  5. STM32 SPI难点浅析
  6. getopt()简介
  7. c++类对象的创建方式
  8. 使用 Pandas 分析 Apache 日志
  9. python开发gui实战_python实战GUI界面+mysql
  10. Java设计模式学习总结(12)——结构型模式之外观模式
  11. centos7 update network time
  12. 在 Windows下使用 fastText
  13. C# 使用微信扫码登录网页
  14. localhost:3000 拒绝访问解决办法
  15. Hardware ---- 输出阻抗
  16. python从1加到100的其中两种方式
  17. Binarized Neural Network : BNN二值神经网络代码实例
  18. LeetCode(626):换座位 Exchange Seats(SQL)
  19. 【贪心策略】区间选点问题
  20. 百度SRE面经-为三面攒人品

热门文章

  1. GLSL——绘制平面图形(一)
  2. 梦幻西游手游经验任务链计算机,梦幻西游手游跑环任务详解 刷经验利器
  3. 从零开始搭建仿抖音短视频APP-后端消息业务模块开发(2)-基础版完结篇
  4. 【搜索】搜刷刷题整理
  5. 生态篇-HBase 进化之从 NoSQL 到 NewSQL,凤凰涅槃成就 Phoenix...
  6. 人声和乐器的频谱范围
  7. MANIFEST.MF是个什么?
  8. Latex第一次写论文记录
  9. LeetCode 41-50题
  10. 盒子装载图片时出现的盒子比图片实际偏高的问题