• 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"
    
    • 1
    • 2
    • 3
    • 4

    在这里插入图片描述
    这个报错并没有影响实际操作,但是看着很难受

    解决

    根据报错显示是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
    在这里插入图片描述
    在这里插入图片描述
    啊,又是被坑的一天,对你有帮助记得点个赞

  • 相关阅读:
    关于Linux系统命令行操作
    玩转代码|逆向分析一下4399小游戏绕过实名认证
    Git Commit Message规范
    机器学习第十一课--K-Means聚类
    pycharm pro v2023.2.4(Python开发)
    [2023 java毕业设计源码]基于SpringBoot的在线交友系统包运行成功]
    Oracle数据库体系结构(二)_物理结构
    基本分页存储管理
    redis悲观锁和乐观锁
    【面试题】Callable使用
  • 原文地址:https://blog.csdn.net/qq_32881447/article/details/125444256