element ui时间日期选择器el-date-picker报错Prop being mutated:"placement"解决方式

目录
  • 发现错误
  • 解决
  • 补充:el-date-picker 初始化报错
  • 总结

发现错误

这两天在写新项目的时候,遇到了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 有个赋值操作,所有不会有报错

因为我的这个bug报错只在 2.15.9 中有。并没有影响实际操作看不过error 报错的可以将版本降至 2.15.9以下就可以了
公司项目都是用的2.12版本的,所以直接npm install element-ui@2.12.0 -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版本和实际安装的不是一个版本,不然不会出现这个问题

还是需要单独npm install element-ui@2.12.0 -s

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

补充:el-date-picker 初始化报错

在点击el-date-picker组件自带的

x初始化后,提交数据报错

Error in event handler for “click”: “TypeError: Cannot read property ‘0’ of null”
Cannot read property ‘0’ of null

因为我当前的类型是daterange是个数组

,他默认初始化是为0所有会报类型错误,而且default-time并不会将其代替,所有 需要手动解决一下,在组件上先判断一下,当前是否为null ,如果是0就返回一个空数组,如果不是0就返回当前数据

v-if="timeRange === null ? timeRange = [] : timeRange = timeRange"

总结

到此这篇关于element ui时间日期选择器el-date-picker报错Prop being mutated:"placement"解决的文章就介绍到这了,更多相关element ui时间日期选择器报错内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • ElementUI日期选择器时间选择范围限制的实现

    目录 单个输入框的 情景1: 设置选择今天以及今天之后的日期 情景2: 设置选择今天以及今天以前的日期 情景3: 设置选择今天之后的日期(不能选择当天时间) 两个输入框 情景1: 限制结束日期不能大于开始日期 ElementUI是饿了么推出的一套基于vue2.x的一个ui框架.官方文档也很详细,这里做一个element-ui日期插件的补充. 官方文档中使用picker-options属性来限制可选择的日期,这里举例子稍做补充. 单个输入框的 组件代码: <el-date-picker v-mod

  • element ui时间日期选择器el-date-picker报错Prop being mutated:"placement"解决方式

    目录 发现错误 解决 补充:el-date-picker 初始化报错 总结 发现错误 这两天在写新项目的时候,遇到了element ui 时间日期选择器一直报错 [Vue warn]: Avoid mutating a prop directly since the value will beoverwritten whenever the parent component re-renders.Instead, use a data or computed property based on

  • 详解React Native开源时间日期选择器组件(react-native-datetime)

    项目介绍 该组件进行封装一个时间日期选择器,同时适配Android.iOS双平台,该组件基于@remobile/react-native-datetime-picker进行开发而来 配置安装 npm install react-native-datetime --save 1.1.iOS环境配置 上面步骤完成之后,直接前台写js代码即可 1.2.Android环境配置 在android/setting.gradle文件中如下配置 ... include ':react-native-dateti

  • fastclick插件导致日期(input[type="date"])控件无法被触发该如何解决

    本文作为一名新手,写的不好地方还请各位大家多多指教,以下内容只是给大家共勉以下我的解决方案,也是我个人的一个见解,有不同意见不同解决方案的朋友还请多多分享自己的解决办法. 首先,我们使用fastclick插件的初衷是解决"tap"事件"点透"的BUG:fastclick与tap都是利用"touch"事件来模拟"click"事件的: 然后我们来大致的了解一下fastclick的工作原理(来自往上的copy): 在我们的app中跟

  • fastclick插件导致日期(input[type="date"])控件无法被触发该如何解决

    本文作为一名新手,写的不好地方还请各位大家多多指教,以下内容只是给大家共勉以下我的解决方案,也是我个人的一个见解,有不同意见不同解决方案的朋友还请多多分享自己的解决办法. 首先,我们使用fastclick插件的初衷是解决"tap"事件"点透"的BUG:fastclick与tap都是利用"touch"事件来模拟"click"事件的: 然后我们来大致的了解一下fastclick的工作原理(来自往上的copy): 在我们的app中跟

  • Element UI框架中巧用树选择器的实现

    本文介绍了Element UI框架中巧用树选择器的实现,分享给大家,顺便给自己留个笔记,具体如下: 介绍 在Element UI框架中有选择器和树形控件,但是没有树形选择器,也就是图上的这种方式的选择器,所以只能自定义选择器的slot.这里介绍的是多选情况,如果是单选则去掉复选框,修改一部分的处理即可. html部分的代码: <el-select v-model="dataArr" :multiple="multiple" filterable :placeh

  • Springcloud feign传日期类型参数报错的解决方案

    目录 feign传日期类型参数报错 Date类型参数报错 LocalDate类型报错 feign传参问题及传输Date类型参数时差的坑 下面说说两种解决方案 feign传参时候使用@DateTimeFormat注解的坑 feign传日期类型参数报错 Date类型参数报错 在Spring cloud feign接口中传递Date类型参数时报错,报错信息. 场景: 客户端传递一个new Date()的参数,服务端接受的参数和客户端有时间差. 客户端打印格式化的new Date(): 2018-05-

  • 微信小程序 滚动选择器(时间日期)详解及实例代码

    微信小程序  滚动选择器(时间日期)详解 微信小程序自己封装了很多控件,用起来确实很方便,如果这是Android里面,还需要自己去定义,不废话,效果图: 一起来看看怎么实现的呢?看完你应该就该说,尼玛,这就行啦-. 这个效果呢,要用到picker组件,动画从底部弹起的滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器. 看下相应的属性: 具体的来看看代码,布局: <view class="section" > <

  • Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能

    具体代码如下所述: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Vue.js中使用iView日期选择器并设置开始时间结束时间校验</title> <!-- import Vue.js --> <script src="//vuejs.org/js/vue.min.js"></script

  • 微信小程序  滚动选择器(时间日期)详解及实例代码

    微信小程序  滚动选择器(时间日期)详解 微信小程序自己封装了很多控件,用起来确实很方便,如果这是Android里面,还需要自己去定义,不废话,效果图: 一起来看看怎么实现的呢?看完你应该就该说,尼玛,这就行啦-. 这个效果呢,要用到picker组件,动画从底部弹起的滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器. 看下相应的属性: 具体的来看看代码,布局: <view class="section" > <

  • element日期选择器el-date-picker样式图文详解

    目录 1.基本用法 2.调高度.颜色 3.调日历图标位置 4.调日历面板 5.设置日期框日期颜色 6.拓展 总结 1.基本用法 代码: <el-date-picker type="date" v-model="valueStart" value-format="yyyy-MM-dd" placeholder="开始时间" > </el-date-picker> 代码解读: type参数是用来定义选择器选

随机推荐