解决使用elementUI的el-date-picker报[Vue warn]: Avoid mutating a prop ...Prop being mutated: “placement“的问题

已于 2022-08-08 16:33:42 修改
阅读量2.7k 收藏 15
点赞数 19
分类专栏： 前端框架 文章标签： javascript elementui vue
于 2022-08-08 16:30:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/imqdcn/article/details/126230265
版权
"本文介绍了在Vue2项目中使用ElementUI 2.15.6版本时遇到的日期选择器报错问题。错误提示为直接修改了来自父组件的props。解决方案包括在日期选择器组件上添加`placement="bottom-start"`属性以避免直接修改props，以及通过升级ElementUI到2.15.8版本来解决。文中提供了两种解决办法的详细步骤，帮助开发者快速修复此类问题。"
摘要由CSDN通过智能技术生成

一、错误背景

本人在一个vue2版本中用的elementUI版本是2.15.6：

"dependencies": {
        "axios": "0.17.1",
        "element-ui": "^2.15.6",
}

但是使用日期选择时，在控制台报错：

[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”

found in

  • –> at packages/date-picker/src/picker.vue

报错截图

这种错误一般是因为直接修改了来自于父级的props属性，也就是数据是

可是我这样做后还是报错，通过G搜索，发现了2种解决问题的方式。

二、最简单的解决方式（推荐）

在使用了该组件的自定义标签处添加如下属性placement="bottom-start"即可：

<el-date-picker v-bind="elProps">
    v-model="dateData['value']"
    placement="bottom-start"
</el-date-picker>

三、升级新的elementUI版本到2.15.8

1、在项目package.json中将"element-ui": "^2.15.6"改为"element-ui": "^2.15.8"

2、先卸载之前的版本，再安装新的版本

npm uninstall element-ui
npm install element-ui@2.15.8 -s
前端三评
关注
专栏目录
el-date-picker 英文改中文.doc
11-18
https://blog.csdn.net/xuelang532777032/article/details/121287203,内有博客截图，方便没有vip的小伙伴下载
at packages/date-picker/src/picker.vue 出现父子组件传值违反单向数据流,原因使用element ui 2.15.9中datepicker日期组件 报错以解决如下
qq_36406553的博客
07-14 2914
vue.runtime.esm.js?2b0e:619 [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”found in
Vue中使用el-data-picker报错（Prop being mutated: “placement“）
pleasantsheep_的博客
08-09 1476
Vue中使用el-data-picker报错 安装 2.15.8 报错
vue子组件修改props报错： [Vue warn]: ’Avoid mutating a prop directly since the value will be …‘解决方法
最新发布
qq_44638778的博客
06-22 2643
Vue 的数据绑定机制遵循单向数据流的原则，这意味着数据的流动是单向的，从父组件流向子组件。vue.runtime.esm.js：4448 [Vue 警告]：避免直接改变 prop，因为每当父组件重新渲染时，该值都会被覆盖。：在 Vue 组件中，父组件可以通过 props 将数据传递给子组件。子组件不能直接修改通过 props 接收到的 props 数据，但可以将 props 数据复制到自己的 data 中，然后进行修改。）将数据变化通知给父组件。事件给父组件，去修改父组件的值i，从而不会打破单向数据流。
使用el-date-picker渲染报错
hdy119yaner的博客
07-26 1576
el-date-picker报错 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中使用el-data-picker报错([Vue warn]: Avoid mutating a prop directly since the value will be overwritt：
SunPeng的博客
07-13 8169
([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")
不更改版本 element ui el-date-picker 报错 Prop being mutated: “placement“解决
空空墓志铭的博客
08-06 6639
element ui el-date-picker 报错 Prop being mutated: “placement“，不变更版本解决报错问题
elementui elementUI - date-picker.zip
03-02
ElementUI 是一个基于 Vue.js 的开源 UI 组件库，它为开发者提供了丰富的界面元素和设计模式，便于构建美观且响应式的 Web 应用。在给定的资源 "elementUI - date-picker.zip" 中，主要涉及的是 ElementUI 中的日期...
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-...
vue2-daterange-picker:Vue2日期范围选择器
04-29
vue2-daterange-picker 基于Vue2日期范围选择器（无jQuery） 该组件尚处于初期阶段，因此，如果出现问题，请写一个问题或创建一个请求请求。 演示和用法 您可以在此处查看演示： : 安装 # install via npm npm i ...
vue-date-range-picker-使用Bootstrap 4样式进行日期范围选择的Vue组件-Vue.js开发
05-27
vue-date-range-picker使用Bootstrap 4样式进行日期范围选择的vue组件实时演示（jsfiddle）功能日期范围选择比较fea vue-date-range-picker使用Bootstrap 4样式进行日期范围选择的vue组件实时演示（ jsfiddle）功能...
解决报错：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”只会在该子组件被创建时赋值一次。
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上。
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项目遇到 el-date-picker 警告问题
weixin_45884050的博客
07-03 1134
“element-ui”: “^2.15.9” 最近一个项目使用最新版本的element-ui，以前使用el-date-picker并不会报错，今天
ElDatePicker 报错
paaaaak的博客
04-19 172
报错信息：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中加入下方代码，即可解决错误。
elementui el-date-picker
12-10
elementui el-date-picker是一个日期选择器组件，可以用于选择单个日期或日期范围。它支持多种日期格式和选项配置，可以根据需要进行自定义。以下是两个el-date-picker的例子： 1.单日期选择 ```html <el-date-...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值