升级 element-ui 2.15.7 后遇到 el-date-picker 警告问题

升级 element-ui 2.15.7 后遇到 el-date-picker 警告问题

知了小站
2022-06-10 / 34 评论 / 10,288 阅读

近期把 element-ui 升级到了官网最新的 2.15.7 版本,无意间发现控制台出现了 Prop being mutated: "placement" 警告,完整警告:

l481ilgy.png

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

错误原因

锁定组件,发现是 el-date-picker 组件抛出的警告。通过在 github 上搜索,最终找到了答案

问题出在了这个 PR #21806 增加了 props placement 用来适应位置,但是之前的代码 created 时有给 placement 赋值。

this.placement = PLACEMENT_MAP[this.align] || PLACEMENT_MAP.left; 

说白了之前 placement 是 data 的对象,现在变成 props 了,然后修改就报错了

解决方案

想要解决这个问题,可以修改版本到 2.15.8

npm uninstall element-ui
npm install element-ui@2.15.8 -s

解决方案来自:https://github.com/ElemeFE/element/issues/21905

本文共 137 个字数,平均阅读时长 ≈ 1分钟
46

打赏

评论 (34)

取消
  1. 头像
    小白
    Windows 10 · FireFox

    谢谢表情

    回复
  2. 头像
    lalala
    Windows 10 · Google Chrome

    nb 解决了

    回复
  3. 头像
    沁柠
    Windows 10 · Google Chrome

    我的也是,elementui版本是2.13.0也报错了,升级也没用也情缓存了

    回复
  4. 头像
    sss
    Windows 10 · Google Chrome

    大佬6666666666666666666666

    回复
  5. 头像
    1232
    Windows 10 · Google Chrome

    老铁。这个问题解决了吗 我降低了版本还是没用

    回复
    1. 头像
      知了小站 作者
      MacOS · Google Chrome
      @ 1232

      我的解决了,可以看看评论区,说不清你的情况和下面的情况差不多

      回复
  6. 头像
    小青鱼
    Windows 10 · Google Chrome

    element没更新版本这两天也开始报错了,"element-ui": "^2.13.1"

    回复
    1. 头像
      css
      Windows 10 · Google Chrome
      @ 小青鱼

      尝试把 ^ 去掉下载指定版本

      回复
      1. 头像
        小青鱼
        Windows 10 · Google Chrome
        @ css

        表情666,谢谢大佬,去掉了^重新cnpm i 一下再npm run dev就好了,现在版本是"element-ui": "2.13.1"

        回复
  7. 头像
    polarbear
    Windows 10 · Google Chrome

    大佬6666666666666666666666

    回复
  8. 头像
    4455
    Windows 10 · Google Chrome

    已解决表情

    回复
    1. 头像
      1232
      Windows 10 · Google Chrome
      @ 4455

      大佬,你是怎么解决的

      回复
      1. 头像
        4455
        Windows 10 · Google Chrome
        @ 1232

        升级版本2.15.8

        回复
  9. 头像
    哈哈哈
    Windows 10 · Google Chrome

    感谢大佬,已解决

    回复
  10. 头像
    23333
    Windows 10 · Google Chrome

    不行啊,升级到2.15.8,重新打包还报这个错

    回复
    1. 头像
      hellezj
      Windows 10 · Google Chrome
      @ 23333

      降版本

      回复
    2. 头像
      知了小站 作者
      MacOS · Google Chrome
      @ 23333

      浏览器缓存清清。我没遇到过

      回复
  11. 头像
    web_keke
    Windows 10 · Google Chrome

    我上级到2.15.8 没生效,然后重新npm run dev 就好使了

    回复
    1. 头像
      知了小站 作者
      MacOS · Google Chrome
      @ web_keke

      解决了就行

      回复
      1. 头像
        web_xiaoke
        Windows 10 · Google Chrome
        @ 知了小站

        感谢您大牛,我这问题真是在网上查了好几天,这个问题是这两天刚出现的,之前没发现有这个问题

        回复
  12. 头像
    哭晕
    Windows 10 · Google Chrome

    还是报错

    回复
    1. 头像
      哭晕
      Windows 10 · Google Chrome
      @ 哭晕

      本地运行没问题,测试环境和uat环境还是会有这个问题

      回复
    2. 头像
      web_keke
      Windows 10 · Google Chrome
      @ 哭晕

      重新启动下服务试试,我就是这么好使的

      回复
    3. 头像
      知了小站 作者
      MacOS · Google Chrome
      @ 哭晕

      删除 node_modules 、package-lock.json
      然后修改element-ui 版本号到 2.15.8
      这样试试。

      回复
  13. 头像
    巴拉啦
    Windows 10 · Google Chrome

    巧了 我就说前一天还好好的

    回复
    1. 头像
      啊吧啊吧
      Windows 10 · Google Chrome
      @ 巴拉啦

      能不降级处理码

      回复
      1. 头像
        浪荡
        Windows 10 · Google Chrome
        @ 啊吧啊吧

        时间选择器el-time-picker可以增加 placement="bottom-start" 解决问题

        回复
        1. 头像
          vue
          Windows 10 · Google Chrome
          @ 浪荡

          解决

          回复
  14. 头像
    迪迦奥特曼
    MacOS · Google Chrome

    我也遇到这个问题了

    回复
    1. 头像
      知了小站 作者
      MacOS · Google Chrome
      @ 迪迦奥特曼

      直接降级解决表情

      回复
      1. 头像
        sc_starcraft
        Windows 10 · Google Chrome
        @ 知了小站

        降级到2.15.1还是不行

        回复
        1. 头像
          知了小站 作者
          MacOS · Google Chrome
          @ sc_starcraft

          版本号改为 2.15.8,然后清除下缓存。

          回复
      2. 头像
        啊吧啊吧
        Windows 10 · Google Chrome
        @ 知了小站

        可以不降级处理吗大佬

        回复
        1. 头像
          知了小站 作者
          MacOS · Google Chrome
          @ 啊吧啊吧

          不管都可以,不影响使用。降级或者等新版本更新升级版本

          回复