vue组件传值报错： Instead, use a data or computed property based on the prop‘s value. Prop being mutated: “

最新推荐文章于 2023-08-05 08:37:32 发布
原创 最新推荐文章于 2023-08-05 08:37:32 发布 · 1.7w 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript

本文介绍了在Vue中遇到的单选组件修改父组件prop值导致的错误，以及两种解决方案。一是通过在子组件中创建中间变量同步父组件传递的值，二是利用`.sync`修饰符结合`$emit`更新父组件状态。这两种方法有效地遵循了Vue的单向数据流原则。

问题

问题：在单选组件（radio）切换后，修改了来自父组件的值（item），然后报错如下：

在这里插入图片描述

原因

prop是单向绑定，不能更改数据，只能由父组件传输过来

解决

1、可以在子组件中 声明一个中间变量（value），把父组件传过来的值(item)赋值给中间变量(value),当单选切换时修改的数据为value,就不会报错

2、使用.sync修饰符与$emit(update:xxx)

父组件

<comp :item.sync="item"></comp>

子组件

this.$emit('update:item',data)
【VUE】异常解决：Avoid mutating a prop directly since the value will be overwritten ...
2025 热爱与开始
07-03 8万+
author: jwensh date: 2021.06.29 文章目录1. 需求及报错2. 分析原因3、解决方案 1. 需求及报错 需求： 使用的场景是：A 组件中引用 B 组件，使用 v-model 给 B 传递参数，B 使用 props: { value } 接收内容，在 B 中根据逻辑直接修改并赋值 value， 事件触发后在浏览器 console 里看到报错，内容如下： Avoid mutating a prop directly since the value will be overwri.
解决vue 子组件修改父组件传来的props值报错问题
12-13
vue不推荐直接在子组件中修改父组件传来的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: “result” (found in component ) <input v-model="currentSe
vue props报错
楠的博客
08-09 2592
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: "pa...
Instead, use a data or computed property based on the prop‘s value. Prop being mutated: “placement“
qq_64180379的博客
12-14 1217
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: "placement" found in
报错：use a data or computed property based on the prop‘s value. Prop being mutated: “placement“
m0_61663332的博客
08-05 1641
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: "placement"
vue父组件更改自组建的值得时候报错这个的解决办法 Instead, use a data or computed property based on the prop's value
m0_37666587的博客
04-10 6703
[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 ...
Instead, use a data or computed property based on the prop's value. Prop being mutated: "model"
06-24
Instead, use a data or computed property based on the prop's value. ``` 这意味着每当父组件重新渲染时，子组件中的 `model` 值将被覆盖，因此直接修改它是不安全的。 #### 解决方案 ##### 方法一：使用本地 ...
前端报错： 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" found in
最新发布
10-22
Prop being mutated: "value"`，这是 Vue.js 开发中的常见错误，以下是完整解决方案： ### 错误原因 在 Vue 父子组件通信中，直接修改从父组件传入的 `value` prop 会导致此报错。因为： 1. **单向数据流原则**：...
be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "visible
08-08
这种做法会引发 Vue 的警告：`Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders`，因为当父组件重新渲染时，prop 的值会被覆盖，从而导致数据流难以...
use a data or computed property based on the prop's value. Prop being mutated: "model"
06-24
### 解决 Vue.js 中 prop 类型检查失败的问题 在 Vue.js 中，当遇到 `type check failed for prop 'maxDate' Expected Date got Object` 的错误时，这通常意味着传递给组件的 `maxDate` 属性值并非预期的 `Date` ...
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: "visible"报错
07-05
Instead, use a data or computed property based on the prop's value.` 这个警告的核心原因在于 Vue 的单向数据流设计原则。为了保持父子组件之间的数据同步且避免副作用，建议通过以下方式解决此问题： ### ...
Instead, use a data or computed property based on the prop‘s value.
m0_53461006的博客
11-12 1194
情况： vue 父组件改变子组件的值，并传回给子组件。报错。 props 只是单向传递。 解决： 使用 this.$emit
use a data or computed property based on the prop‘s value. Prop being mutated: “xxx“
m0_59157023的博客
02-09 1036
the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "iss"
Avoid mutating a prop ..... Instead, use a data or computed property based on the prop‘s value
小哈力----一个小前端工程师
07-15 792
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: "vid" prop之vid正在被改变。免直接改变这个prop，因为每当父组件重新渲染时，该值将被覆盖。相反
vue组件传值报错：use a data or computed property based on the prop‘s value. Prop being mutated: “tipsShow“
徐飞的博客
06-27 1万+
vue组件传值报错：use a data or computed property based on the prop‘s value. Prop being mutated: “tipsShow“ prop是单向绑定，不能更改数据，只能由父组件传输过来
vue组件传值报错：use a data or computed property based on the prop‘s value.
记录本人工作中遇到的问题、经验总结以及分享。
02-15 1229
小结：prop中的值不能更改，但是可以赋值给data中的值，将show改成menuShow。，不能更改数据，只能由父组件传输过来。原因分析：prop是。
use a data or computed property based on the prop's value.
热门推荐
A_bet_of_three_years的博客
11-07 2万+
use a data or computed property based on the prop's value.
use a data or computed property based on the prop‘s value.【vue报错】
weixin_44707050的博客
10-26 751
在使用组件传值（父子之间传值）时，报了这样一个错误； 原因是，儿子直接改了父亲传过来的值，再传给父亲； 解决：儿子重新定义一个变量传给父亲即可；
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值