vue项目报错Avoid mutating a prop directly since the value will be overwritten whenever the parent ...

最新推荐文章于 2024-07-01 10:23:22 发布

huakaiwuxing

最新推荐文章于 2024-07-01 10:23:22 发布

阅读量284

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/huakaiwuxing/article/details/119638654

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

今天在做项目的时候报了这么一个错，

场景是一个vue的view中嵌套了一个弹框子组件A，该子组件中又嵌套了一个子组件B，

B组件中的input绑定的直接是父组件传递过来的放在props中的值，所以报错，意思是不能直接通过改变props中的值来改变父组件的值，那么，怎么解决呢？

我们可以在data中添加指向props中值的写法来解决这个问题

props: {
    propertyId:{type: Number,},
    repayId:{type: String,},
    repayDate:{type: String,},
    repayMoney:{type: String,},
    isEdit:{type: Boolean,},
},

data() {
    return {
        repayMoneyEdit: this.repayMoney,
        repayDateEdit: this.repayDate,
    }
},

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

huakaiwuxing

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

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

计算机毕业论文源码，学生个人网页制作html源码。贴近用户做网络推广和互联网优化。

09-07

5万+

avoid mutating a prop directly since the value will be overwritten whenever完美解决，不要直接修改从父组件传过来的props数据，在data函数中重新定义一个变量，将props数据数据赋值在data变量上，后面修改data变量即可。既然在双向绑定时会出现问题，那么可以在子组件中定义一个data，然后把从父组件传递过来的数据通过props赋值给data，再把data绑定到v-model上。

前端开发：Vue报错Avoid mutating a prop directly since the value will be…的解决方法

软贱开发攻城狮

07-25

6558

前端开发中，在使用Vue开发的时候，经常会遇到一些很共性的报错提示，而且有时候提示已经很明确的告诉开发者问题出现在哪里，尤其是在Chrome的控制台输出上面，只要看一下输出日志就知道问题所在。但是对于一些刚入行的开发者来说，看日志的意识还没有养成，需要借助外力来解决问题，这样不是不可以，主要是要学会看输出的日志以及提示，这样才能很好的“对症下药”。httpshttpshttps。...

参与评论您还未登录，请先登录后发表或查看评论

【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 warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent..

最新发布

qq_36851010的博客

07-01

1071

我遇到这个情况不是我手动修改从父组件传过的值，而是我把ui组件的弹框封装成了子组件，在执行右上角叉号“X”关闭时，报错的，找了好久，没找到原因，可能是组件的内部执行的，后来我就给传过来的值，用computed计算属性，这才解决问题，对此，有感而发，建议以后父组件传过来的值，子组件需要更改时的情况，建议先计算属性赋值，再。：在子组件中创建一个新的 data 属性，并将 prop 的值赋给它。的值，这会导致当父组件重新渲染时，你在子组件中做的任何修改都会被父组件传递过来的新值覆盖。

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

weixin_33757609的博客

12-24

1503

项目中遇到父组件传值 activeIndex 1 <Tabs :tabs="tabs" :activeIndex="activeIndex" ></Tabs> 2 <script > 3 export default{ 4 updated(){ 5 let currentRoute=this.$route.name;...

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

qq1722377628的博客

12-19

1099

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 warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent co

肖肖肖丽珠的博客

06-05

786

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 m...

Vue：Avoid mutating a prop directly since the value will be overwritten whenever the parent..报错

weixin_50701798的博客

03-09

2919

Vue框架的：Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or goupuitied property based on theprop’s value.Prop being mutated:"number1"报错我们想要在Vue框架中实现一个父子通信中的双向绑定，这是出现错误的源码： &lt

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” 产生错误的原因：在子组件中，你试图修改父组.

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

Ginny_2019的博客

08-22

1246

错误：问题描述：父组件中传值“resourceId”给子组件，子组件用props去接收了，同时，在关闭时对该props的“resourceId”值进行了修改，同时父组件中对该值也进行了修改。父组件：子组件：由于父组件closeResource()方法中更改了this.resourceId值，closeResource方法除了父组件触发这个方法，子...

Avoid mutating a prop directly since the value will be overwritten whenever the parent ---（父子组件）

m0_63775072的博客

12-02

1091

意思：避免直接改变属性，因为每当父组件渲染的时候，改值将被覆盖。错误原因：改动了子组件引用的父组件的变量，也就是props中的数据。解决办法：但是又出现新问题，dialog不显示。所以我想的是computed但是 computed只有读取功能没有设置功能。我现在解决了。解决办法：我想的是子组件直接写的visible的属性。解决办法：父组件里面的子组件里面的。

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

hhkongbai的博客

09-10

1193

在更改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...

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

weixin_51173316的博客

11-30

2323

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

weixin_33980459的博客

03-21

666

场景：父组件向子组件传递数据，子组件去试图改变父组件数据的时候。解决：子组件通过事件向父组件传递信息，让父组件来完成数据的更改。比如：我的父组件是普通页面，子组件是弹窗的登录界面，父组件传递的数据（reloginDialog）控制登录界面的显示（reloginDialog = true），当登陆成功后，子组件触发一个事件，父组件捕获后（reloginDialog = false）将登录...

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

09-06

该警告信息提醒我们避免直接改变一个prop的值，因为当父组件重新渲染时，该值将被覆盖。相反，我们应该使用基于prop值的数据或计算属性来进行操作。这个警告信息对两个prop也进行了具体的引用，分别是"placement"和"name"。这个警告的目的是为了保证数据的一致性和可维护性。当我们直接改变一个prop的值时，父组件重新渲染时会将新的值覆盖之前的值，这可能会导致不可预测的结果和错误。通过使用数据或计算属性，我们可以在子组件中创建一个副本来进行操作，而不会影响到父组件的数据。这样可以确保数据的更新只在子组件内部进行，并且不会影响到父组件的状态。一个解决这个警告的方法是在子组件中使用一个数据或计算属性来存储prop的值。这样，我们可以在子组件内部对该值进行改变，而不会影响到父组件。另外，我们还可以使用事件来通知父组件数据的变化，从而保持父子组件之间的数据同步。另一个解决这个警告的方法是使用Vue提供的.sync修饰符。通过在子组件中使用.sync修饰符绑定prop值，我们可以在子组件中直接改变该值，而不会触发警告信息。这种方法可以简化代码，并提供更好的可读性。但需要注意的是，使用.sync修饰符不适用于所有的情况，需要根据具体的需求来决定是否使用。123 #### 引用[.reference_title] - *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-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [解决报错Avoid mutating a prop directly since the value will be overwritten whenever the parent ...](https://blog.csdn.net/qq_52045491/article/details/129676506)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [解决vue 子组件修改父组件传来的props值报错问题](https://download.csdn.net/download/weixin_38534683/13678325)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]