Vue中使用el-data-picker报错 Avoid mutating a prop directly since the value will be overwrite

已于 2022-09-19 21:05:53 修改
阅读量4.9k 收藏 17
点赞数 13
文章标签： vue.js 前端
于 2022-07-18 21:16:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45225759/article/details/125860444
版权

在这里插入图片描述

锁定组件，发现是 el-date-picker 组件抛出的警告。通过在 github 上搜索，最终找到了答案
问题出在了这个 PR #21806 增加了 props placement 用来适应位置，但是之前的代码 created 时有给 placement 赋值。
this.placement = PLACEMENT_MAP[this.align] || PLACEMENT_MAP.left;
说白了之前 placement 是 data 的对象，现在变成 props 了，然后修改就报错了

解决

想要解决这个问题，可以修改版本到 2.15.8

npm uninstall element-ui
npm install element-ui@2.15.8 -s
在这里插入图片描述
注意：这里不要【‘^’】,否则还会报错

SerendipityM
关注
前端开发：Vue报错Avoid mutating a prop directly since the value will be…的解决方法
软贱开发攻城狮
07-25 1万+
前端开发中，在使用Vue开发的时候，经常会遇到一些很共性的报错提示，而且有时候提示已经很明确的告诉开发者问题出现在哪里，尤其是在Chrome的控制台输出上面，只要看一下输出日志就知道问题所在。但是对于一些刚入行的开发者来说，看日志的意识还没有养成，需要借助外力来解决问题，这样不是不可以，主要是要学会看输出的日志以及提示，这样才能很好的“对症下药”。httpshttpshttps。...
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上。
vue2.0 改变子组件从父组件传递过来的值报错Avoid mutating a prop directly since the value will be overwritten whenever
xudakaka的专栏
02-09 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 mutated: "se...
el-date-picker 表单组件报错Avoid mutating a prop directly since the value will be overwritten
Meta.Qing的博客
08-22 909
el-date-picker 表单组件报错Avoid mutating a prop directly since the value will be overwritten
vue报错：Avoid mutating a prop directly since the value will be overwritten whenever the parent compone
最新发布
m0_59157023的博客
08-20 817
在 Vue.js 中，直接修改一个来自父组件的 prop（属性）是不被推荐的，因为这样做会违反组件间的单向数据流原则。当你尝试直接修改一个 prop 时，如果父组件重新渲染（例如，由于数据变化或响应式依赖更新），这个 prop 的值将会被父组件中的原始值覆盖，从而导致你的修改丢失。同时，子组件dialogVisible发生变化通过 this.$emit('updateDialogVisible',this.dialogVisible)其中：BankDialogVisible 是父组件传给子组件的值。
Vue中使用el-data-picker报错([Vue warn]: Avoid mutating a prop directly since the value will be overwritt：
SunPeng的博客
07-13 8201
([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: "placement")
vue elementUI el-date-picker [Vue warn]: Avoid mutating a prop directly since the value will be over
u010234868的专栏
06-07 394
第一种：el-date-picker处添加属性placement="bottom-start"。第二种：指定elementUI版本为2.15.8，重新安装依赖。
使用el-date-picker组件时，控制台出现报错 Avoid mutating a prop directly ...... Prop being mutated: “placement“
weixin_45737202的博客
10-09 865
el-date-picker控制台报错 - Prop being mutated: "placement" 问题解决办法
【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】异常解决：Avoid mutating a prop directly since the value will be overwritten
m0_67394006的博客
03-02 870
author: date: 2021.07.03 文章目录 1. 需求及报错 2. 分析原因 2.1 这是什么原因造成？ 3. 解决方案: 使用 v-on 明确实现修改方式 4. 参考 1. 需求及报错 需求： 使用的场景是：A 组件中引用 B 组件，使用 v-model 给 B 传递参数，B 使用 props: { value } 接收内容，在 B 中根据逻辑直接修改并赋值 value， 事件触发后在浏览器 console 里看到报错，内容如下： Avoid mutating a .
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使用组件＜el-date-picker＞报错[Vue warn]: [Vue warn]: Avoid mutating a prop directly since the value will
hui_54520的博客
06-30 4399
vue使用组件＜el-date-picker＞报错[Vue warn]: [Vue warn]: Avoid mutating a prop directly since the value will
解决使用elementUI的el-date-picker报[Vue warn]: Avoid mutating a prop ...Prop being mutated: “placement“的问题
poproute的博客
02-16 1116
解决使用elementUI的el-date-picker报[Vue warn]: Avoid mutating a prop ...Prop being mutated: “placement“的问题
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re
u010328533的博客
05-28 659
vue 中父子组件调用时报错 Avoid mutating a prop directly since the value will be overwritten 项目中使用vue ，组件化开发过程中，将新增对话框分离为一个子组件 父页面内容 子页面内容 这里用一个自定义dbVisible属性，传递控制这个抽屉的显示与隐藏，直接这样写的话页面会报错 如图所示 查了一下，这个报错是因为 单向数据流 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-
qq_47756657的博客
07-15 1383
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 warn]: Avoid mutating a prop directly since the value will be overwritten whenever the paren
ahao214——Dreamspace
07-03 808
今天在做Vue的时候，子组件关闭的时候，报如下错误 报错：vue.esm.js?65d7:610 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or comput...
vue使用el-date-pickerel-date-picker控制台报Avoid mutating a prop directly since the value will be overwrit
m0_58100982的博客
09-22 223
解决方法：使用placement="bottom-start"
Avoid mutating a prop directly since the value will be overw
dream_summer的博客
03-11 325
子组件接收到参数后不能够直接修改，因为每当父组件重新渲染时，该值将被覆盖，用一个回调函数来调用到父组件 进行修改
Avoid mutating a prop directly since the value will be overwritten whenever the parent component
m0_51583158的博客
08-14 3万+
在子组件需要改变父组件值的地方，通过 this.$emit("isPreview", true)通知父组件修改值。解释：避免直接更改道具，因为每当父组件重新渲染时，该值都会被覆盖。相反，使用基于道具值的数据或计算属性。
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" 报错解决
07-14
这个报错是因为在子组件中直接修改了父组件传递的 prop 属性，而 Vue.js 不允许直接修改 props 的值，因为 props 是由父组件传递给子组件的，子组件应该保持对这些 props 的只读访问。 要解决这个报错，你可以通过以下两种方式之一来避免直接修改 props 值： 1. 使用一个本地的 data 属性或计算属性来存储需要修改的值，并在子组件中操作这个本地属性。这样可以避免直接修改 props。 2. 如果需要在子组件中修改父组件的数据，可以通过触发事件的方式，将需要修改的值作为 payload，传递给父组件。然后在父组件中监听事件，并在事件处理函数中更新相应的数据。 下面是示例代码，演示如何避免直接修改 props 值： ```vue <template> <div> <button @click="updateProp">Update Prop</button> </div> </template> <script> export default { props: ['value'], methods: { updateProp() { // Option 1: 使用本地的 data 属性或计算属性 this.localValue = 'New value'; // Option 2: 触发事件更新父组件的数据 this.$emit('update:value', 'New value'); } } } </script> ``` 在上述示例中，你可以根据你的具体需求选择合适的方式来解决这个问题。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值