element ui 时间日期选择器 el-date-picker 报错 Prop being mutated: “placement“

这两天在写新项目的时候,遇到了element ui 时间日期选择器一直报错

[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 data-picker 下的picker文件报错的,我这边在node_modules 中找到这个vue文件发现
在这里插入图片描述
props值中有加一个placement: Popper.props.placement,
created的时候 placement 有个赋值操作 this.placement = PLACEMENT_MAP[this.align] || PLACEMENT_MAP.left;这样就导致了报错
在这里插入图片描述
老项目没有报错是因为版本中props中没有placement,只有created的时候 placement 有个赋值操作,所有不会有报错
element ui 时间日期选择器 el-date-picker 报错 Prop being mutated: “placement“_第1张图片
因为我的这个bug报错只在 2.15.9 中有。并没有影响实际操作看不过error 报错的可以将版本降至 2.15.9以下就可以了
公司项目都是用的2.12版本的,所以直接npm install [email protected] -s

可以看看element ui git https://github.com/ElemeFE/element/issues/21905
刚开始报错的时候还没有意识到版本问题,后来老项目看到node_modules 中picker.vue 和现在用的不一样的时候才发现是版本问题,
本身我的package.json里面element ui显示的版本是2.12的

因为安装其他东西出现问题把package-lock.json 和node_modules 都删了,然后npm install 结果坑的是package.json版本和实际安装的不是一个版本,不然不会出现这个问题
element ui 时间日期选择器 el-date-picker 报错 Prop being mutated: “placement“_第2张图片还是需要单独npm install [email protected] -s
element ui 时间日期选择器 el-date-picker 报错 Prop being mutated: “placement“_第3张图片
element ui 时间日期选择器 el-date-picker 报错 Prop being mutated: “placement“_第4张图片
不想降级的话,可以在main.js 添加以下代码

import Vue from 'vue'
import ElementUI from 'element-ui'
function RepairProps(cmp) {
(cmp.mixins || []).forEach(mixin => {
if (mixin.props && mixin.props.placement) {
const defaultValue = mixin.props.placement.default
mixin.data = new Proxy(mixin.data, {
apply(target, thisArg, argArray) {
const res = Reflect.apply(target, thisArg, argArray)
return {
...(res || {}),
placement: defaultValue
}
}
})
delete mixin.props.placement
}
if (mixin.mixins && mixin.mixins.length > 0) {
RepairProps(mixin)
}
})
}

RepairProps(ElementUI.DatePicker)
RepairProps(ElementUI.TimePicker)
RepairProps(ElementUI.TimeSelect)

Vue.use(ElementUI, {
size: 'medium'
}) 

啊,又是被坑的一天,对你有帮助记得点个赞

你可能感兴趣的:(ui,javascript,vue.js)