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

最新推荐文章于 2024-01-26 12:02:09 发布
最新推荐文章于 2024-01-26 12:02:09 发布
阅读量1.2k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27674439/article/details/119761783
版权

首先我们看一下页面报错
在这里插入图片描述
其实问题很简单父子组件传值的问题；
在这里插入图片描述
子组件的代码也很简单
在这里插入图片描述

父组件：
在这里插入图片描述
在这里插入图片描述
问题:按保存不报错，按取消报如上所示错误。
然后找原因，原理应该Vue单项数据流的原因，不能随意修改props里的值，那为什么我保存的这个函数是可以不报错的呢？？我两个调用都是同一个函数呀？
真的有点懵逼！
但是我问题还是解决了
在这里插入图片描述

我把v-model换成了：visible,这样保存和取消都没有报错了
这个具体原因我还没有搞清楚，应该是ant-design-Vue底层设计的原因吧

一晌贪欢i
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
avoid mutating a prop directly since the value will be overwritten whenever完美解决
计算机毕业论文源码，学生个人网页制作html源码。贴近用户做网络推广和互联网优化。
09-07 4万+
avoid mutating a prop directly since the value will be overwritten whenever完美解决，不要直接修改从父组件传过来的props数据，在data函数中重新定义一个变量，将props数据数据赋值在data变量上，后面修改data变量即可。既然在双向绑定时会出现问题，那么可以在子组件中定义一个data，然后把从父组件传递过来的数据通过props赋值给data，再把data绑定到v-model上。
解决vue 子组件修改父组件传来的props值报错问题
12-13
[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...
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent..
qq_58062502的博客
02-06 4万+
[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: "value"
解决 [Vue warn]:Avoid mutating a prop directly 警告
最新发布
s724542558的博客
01-26 679
解决 [Vue warn]: Avoid mutating a prop directly 警告,并附原理解释链接
解决报错：Avoid mutating a prop directly since the value will be overwritten whenever the parent componen
qq_45991812的博客
06-09 1万+
避免直接更改道具，因为每当父组件重新渲染时，该值都会被覆盖。2、若要实现子组件中的参数和父组件中的动态关联， 可以在watch属性中监听这个参数 “addGroup”，为其赋值，实现动态关联。以本问题为例：prop在子组件接收父组件传递过来的参数“addGroup”，但是在子组件中修改了这个参数 “addGroup”注意：新声明的变量名要区别于父组件传来的参数名，在子组件的代码（methods/html）中使用新声明的变量名。这样的话参数 “addGroup”只会在该子组件被创建时赋值一次。
【Vue】报错：Avoid mutating a prop directly since the value will be overwritten whenever the parent
Pulse的博客
05-15 1万+
当我们直接改变父组件的 props 值是会报以下警告： [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: “facomment” 会报错的原
vue开发中遇到的问题总结
01-19
（1）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 ...
k8s-mutating-webhook
03-10
Kubernetes突变Webhook
kube-mutating-webhook-tutorial:一个实现sidecar注入的Kubernetes变异Webhook服务器
05-09
Kubernetes突变Webhook用于Sidecar注入 此tutoral显示了如何构建和部署 ：注射nginx的边车容器插入到持久对象的现有吊舱。 先决条件 v1.12 +版本 版本17.03+ 版本v1.11.3 + 访问Kubernetes v1.11.3 +集群与...
rdpc-kube-mutating-webhook：突变要与k8s和工作流管理一起使用的webhook
02-10
RDPC Kube突变Webhook 工具类 取一个左json和右json，生成一个jsonPatch列表： ://json-patch-builder-online.github.io/ 获取输入json和补丁列表，然后生成输出json的外观： : 用Docker测试 ...
VUE报错: Avoid mutating a prop directly since the value will be overwritten whenever the parent及解决方案
热门推荐
yangwq的博客
01-05 15万+
VUE报错：[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: "topActive" 大概意思是：避免直接改变属性，因为每当父组件重新渲染
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-
qq_36697196的博客
07-24 4万+
单向数据流 prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解 另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着不应该在子组件内部改变 prop。如果这么做了，Vue 会在控制台给出警告 下面是一个典型例子 <div id="example"> <parent></parent> </div> <script> var
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent c
qq_43840793的博客
11-28 4828
报错翻译：避免直接更改一个prop，因为每当父组件重新渲染时，该值都会被覆盖。相反，应使用基于prop值的数据或计算属性。解决办法，使用基于prop的值，即把名为activeId的prop的值放在另一个变量中，对那个变量进行修改，不修改activeId。调用组件页面不用更改，仅修改组件。声明一个新的变量activeTemp，对它进行修改。activeId为传递的值，用于存放某一页导航选中的索引记录。该页面为农机管理，activeId等于1。上述代码报错，以下是修改。3、调用组件页面代码。
【解决方案】[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the pa
腾讯云云开发布道师，慕课网合作讲师
02-16 5万+
1、错误详情 [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...
[Vue warn]: Avoid mutating a prop directly...
红岸基地
11-12 3406
[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. 中文：[Vue 警告⚠...
vue报错 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the
xueli_2017的博客
05-26 3万+
vue报错： [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...
Vue报错：[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever...
xunfengZ的博客
11-19 1万+
报错如图所示： 其原因是我从父组件向子组件传值时，用props接收之后，我在子组件中直接修改了接收的参数的值。 例如： //接收了两个参数：一个数组，一个字符串 props:["list","type"] ...... //做了一些修改,比如合并了一个新数组 this.list=this.list.concat(newList) 这时候再使用list这个数据就会报错。 原因： 由于Vue内部的机制，传入的props中的值 是不允许被修改的。在新的渲染机制中，当父组件重新渲染时，子组件都被会覆盖，这时的p
vue使用prop通信出错:Avoid mutating a prop directly since the value will be overwritten whenever the parent
鸭绒的博客
09-19 4万+
使用props进行父子组件通信时产生错误：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: “currentIndex” 产生错误的原因：在子组件中，你试图修改父组.
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-r
09-06
- *1* [Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-](https://blog.csdn.net/qq_47756657/article/details/125798183)[target="_blank" data-report-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值