el-date-picker报错[Vue warn]: Avoid mutating a prop directly since the value will--解决方法

已于 2022-10-21 08:42:37 修改
阅读量721 收藏 1
点赞数
分类专栏： html 接口请求状态码 #react 文章标签： vue.js 前端 javascript
于 2022-10-21 08:35:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dong281500748/article/details/127438729
版权

在开发的过程中、凡是页面使用了el-date-picker的这个组件 就会报一个这样的错误

从vue的角度来看、是子组件修改了父组件传递过来的参数导致的

但是我改了好久也没改动

后来才发现是elementUI的版本问题

升级成8的版本就能解决、

我是直接升级到了最新的版本10

npm install element-ui@2.15.8 -s
或者降低版本2.14.1也可以，2.15.6和2.15.7这边版本有问题，暂不建议
出现组件报错原因是：
element-ui 组件库中 之前  placement 变量 是 data 的对象，
现在变成 props 了，然后修改就报错了

老董前端
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
vue-ctk-date-time-picker:VueJS组件选择日期和时间，包括范围模式
04-13
查找v1文档暗模式演示版安装纱yarn add vue-ctk-date-time-picker NPM npm i --save vue-ctk-date-time-picker用法ES6模块/ CommonJS import VueCtkDateTimePicker from 'vue-ctk-date-time-picker' ;import 'vue-...
vue使用组件＜el-date-picker＞报错[Vue warn]: [Vue warn]: Avoid mutating a prop directly since the value will
hui_54520的博客
06-30 4288
vue使用组件＜el-date-picker＞报错[Vue warn]: [Vue warn]: Avoid mutating a prop directly since the value will
Vue中使用el-data-picker报错([Vue warn]: Avoid mutating a prop directly since the value will be overwritt：
SunPeng的博客
07-13 8129
([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 328
第一种：el-date-picker处添加属性placement="bottom-start"。第二种：指定elementUI版本为2.15.8，重新安装依赖。
vue使用element-ui中日期选择器 (el-date-picker) 出现报错
Tianxiaoxixi的博客
07-27 2662
vue使用element-ui中日期选择器 (el-date-picker) 出现报错
解决使用elementUI的el-date-picker报[Vue warn]: Avoid mutating a prop ...Prop being mutated: “placement“的问题
poproute的博客
02-16 1089
解决使用elementUI的el-date-picker报[Vue warn]: Avoid mutating a prop ...Prop being mutated: “placement“的问题
解决Vue3中出现[Vue warn]: Invalid event arguments: event validation failed for event “change“. 警告
weixin_52075774的博客
05-05 7664
在封装组件change事件时，每次emit change事件时，将modelValue置为false或0时会报[Vue warn]: Invalid event arguments: event validation failed for event "change". 警告。原因：Vue3内部会对change进行一个类型校验，如果返回值不为真的话会发出这个警告。在返回值添加类型判断即可解决。
vue项目遇到 el-date-picker 警告问题
weixin_45884050的博客
07-03 1080
“element-ui”: “^2.15.9” 最近一个项目使用最新版本的element-ui，以前使用el-date-picker并不会报错，今天
el-date-picker 英文改中文.doc
11-18
https://blog.csdn.net/xuelang532777032/article/details/121287203,内有博客截图，方便没有vip的小伙伴下载
vue element-ui el-date-picker限制选择时间为当天之前的代码
10-16
本文的核心知识点是探讨如何使用`el-date-picker`组件，并通过`picker-options`属性来限制选择的日期必须是当天之前的时间。我们将会深入解析代码示例、API用法以及实现原理。 首先，`el-date-picker`组件是Element...
vue2-daterange-picker:Vue2日期范围选择器
04-29
vue2-daterange-picker 基于Vue2日期范围选择器（无jQuery） 该组件尚处于初期阶段，因此，如果出现问题，请写一个问题或创建一个请求请求。 演示和用法 您可以在此处查看演示： : 安装 # install via npm npm i ...
react-native-daterange-picker:用于选择日期范围或单个日期的React Native组件
05-04
react-native-daterange-picker 一个React Native组件，用于选择日期范围或单个日期。 完全可定制使用Moment.js处理日期安装yarn add react-native-daterange-picker 或者npm install --save react-native-daterange...
【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” 会报错的原
element ui 时间日期选择器 el-date-picker 报错 Prop being mutated: “placement“
知所云
06-24 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 being mutated: "placement"
[Vue warn]: Invalid event arguments: event validation failed for event “click“.
weixin_46353317的博客
06-24 6430
在使用el-menu绑定click事件时想拿到回调函数vc实例中的index进行后续的路由配置时，发现打印出来的index的值为null，并且后台输出vue警告：Invalid event arguments: event validation failed for event "click"，如下图。百度了一下网上的说法，结合官网对el-menu的用法发现问题应该是忘记给el-menu加上唯一标识index，导致默认匹配到index==null的路由(该点为猜测，看了官方文档index默认为null)
Avoid mutating a prop directly子传父报错解决
weixin_42690133的博客
08-20 1164
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: “drawer” element-ul抽屉模块的时候经历这样一个错误片段，已解决 错误:避免直接改变属性，因为每当父组
Vue中使用el-data-picker报错 Avoid mutating a prop directly since the value will be overwrite
qq_45225759的博客
07-18 4846
使用 el-data-picker报错
ElDatePicker 报错
paaaaak的博客
04-19 166
报错信息：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”在main.js中加入下方代码，即可解决错误。
不更改版本 element ui el-date-picker 报错 Prop being mutated: “placement“解决
空空墓志铭的博客
08-06 6521
element ui el-date-picker 报错 Prop being mutated: “placement“，不变更版本解决报错问题
a-range-picker 报错 Invalid prop: custom validator check failed for prop "value".
09-05
a-range-picker报错"Invalid prop: custom validator check failed for prop 'value'."是因为组件的value属性未通过自定义验证器的检查。 根据引用，当出现这个错误时，首先要找到报错的组件，然后检查是否绑定了值，并且要确保绑定的数据类型与验证器一致。 引用中提到，在使用ant Design Vue中的日期区间选择器时，也出现了相同的错误。在该情况下，经过检查发现日期选择器的绑定值是一个数组。这表明，在使用a-range-picker时，我们需要将值绑定为一个数组，否则无法匹配。因此，我们需要检查我们的a-range-picker组件的值是否是一个数组。 综上所述，要解决a-range-picker报错"Invalid prop: custom validator check failed for prop 'value'."的问题，我们需要确保该组件绑定了值，并且该值的数据类型是一个数组。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [element-ui 报错Invalid prop: custom validator check failed for prop “index“.](https://blog.csdn.net/SmartJunTao/article/details/124093054)[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_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [【Ant Desgin ARange BUG】ARangePicker组件报错Invalid prop: custom validator check failed for prop ...](https://blog.csdn.net/qq_44933075/article/details/121988631)[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_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

老董前端

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值