Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug Report] el-date-picker控制台警告:Instead, use a data or computed property based on the prop's value. Prop being mutated: "placement" #21905

Open
ElanYoung opened this issue Jun 4, 2022 · 27 comments

Comments

@ElanYoung
Copy link

Element UI version

2.15.9

OS/Browsers version

Mac

Vue version

2.6.14

Reproduction Link

https://codepen.io/elanyoung/pen/abqKxqE

Steps to reproduce

打开控制台即可看到警告

What is Expected?

解决控制台警告

What is actually happening?

2.5.18版本没有此警告,更新2.5.19就出现了,placement属性造成的

@Ybbbb
Copy link

Ybbbb commented Jun 5, 2022

我也遇到了

@Yusoo
Copy link

Yusoo commented Jun 6, 2022

+1

2 similar comments
@ildan-zab
Copy link

+1

@hkaikai
Copy link

hkaikai commented Jun 6, 2022

+1

@lqzhgood
Copy link
Contributor

lqzhgood commented Jun 6, 2022

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

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

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

@ElanYoung
Copy link
Author

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

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

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

是的

@lqzhgood
Copy link
Contributor

lqzhgood commented Jun 6, 2022

提了 PR 等合并了。
by the way…… 项目依赖的 node-sass 版本太低了,最高只能支持到 node 11 版本 ,https://github.com/sass/node-sass/releases/tag/v4.11.0
而且 node-sass 的编译环境太恶心~ 强烈建议切换到纯 js 的 sass https://www.npmjs.com/package/sass

@StiflerMaxwell
Copy link

+1

@XivLaw
Copy link
Contributor

XivLaw commented Jun 8, 2022

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

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

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

sorry...我的锅...提交的时候没检查仔细...😨

@WMZL
Copy link

WMZL commented Jun 9, 2022

怎么解决这个问题呢?

@yzyyna
Copy link

yzyyna commented Jun 9, 2022

怎么解决这个问题呢?

fallback to 2.15.6

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

@lqzhgood
Copy link
Contributor

lqzhgood commented Jun 9, 2022

此 bug 仅存在 2.5.19。因为 placement 仅为内部使用,且仅在 picker 初始化时被修改,其实并不会导致任何问题。
如果嫌 error 烦人,降到 2.5.18 就可以了

要么就催官方尽快合并 PR #21908

@Lyong0216
Copy link

此 bug 仅存在 2.5.19。因为 placement 仅为内部使用,且仅在 picker 初始化时被修改,其实并不会导致任何问题。 如果嫌 error 烦人,降到 2.5.18 就可以了

要么就催官方尽快合并 PR #21908

锁定版本 安装非2.5.19的版本

@lucuxx
Copy link

lucuxx commented Jun 11, 2022

怎么解决这个问题呢?

fallback to 2.15.6

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

并不能解决问题

@WorldOnlineX
Copy link

可以先回退2.15.8

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

@Hercat77
Copy link

2.15.6也有这个问题,只能回退到2.15.8版本

@Rhyheart
Copy link

同样的问题

@ygx-cq
Copy link

ygx-cq commented Jun 22, 2022

怎么解决这个问题呢?

临时应急方式

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'
})

@ai-vip
Copy link

ai-vip commented Jun 24, 2022

2.15.6有问题,2.15.8版本修复了,2.15.9又有问题了

@regg1e
Copy link

regg1e commented Jul 13, 2022

2.15.9又出现了,

@Speacnow
Copy link

Speacnow commented Aug 2, 2022

+1

@lqzhgood
Copy link
Contributor

lqzhgood commented Aug 3, 2022

#22039

@MARIOMARUI
Copy link

怎么解决这个问题呢?

临时应急方式

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'
})

为什么无无法找到这个变量placement
1662021771917

@ygx-cq
Copy link

ygx-cq commented Sep 1, 2022

这个要看你打印对象的位置了,还有就是涉及到浏览器控制台打印对象机制
你在调用第一个RepairProps函数前去打印,打印语句后面接个debugger,这样你就能看到那个变量了
如:
image

@crytoplus
Copy link

2.15.10 已修复

1 similar comment
@ElanYoung
Copy link
Author

2.15.10 已修复

@zlf-1996 zlf-1996 mentioned this issue Dec 29, 2022
@lcxcxl
Copy link

lcxcxl commented Jan 20, 2023

image
image
image
image
所以写一个align="center",就不会改变值

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests