date-picker: fix modify props "placement" error

[lqzhgood]

!!! This error is on the current production version 2.15.9 , please quick fix

fix this error

vue.runtime.esm.js?2b0e:619 [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"

found in

---> <ElDatePicker> at packages/date-picker/src/picker.vue

because this PR #21806 add props placement to erroneously changed "placement" data -> props
detail in issues #21905

• Make sure you follow Element's contributing guide (中文 | English | Español | Français).
• Make sure you are merging your commits to dev branch.
• Add some descriptions and refer relative issues for you PR.

[sugarnut001]

The same error...

[55236339]

Element UI version fallback to 2.15.7

npm uninstall element-ui
npm i [email protected] -s

[trry-hub]

这个方法并不能解决问题

[cjy816618]

我也遇到这个问题了

[a1292779206]

为什么我element 2.15.6也有这个问题

[trry-hub]

为什么我element 2.15.6也有这个问题

npm uninstall element-ui

npm install [email protected]

这样试试，应该能解决你的问题

[akmalov-i]

Element UI version fallback to 2.15.7

npm uninstall element-ui npm i [email protected] -s

it works!!!!!! THANKS! :3

[fengzhang2011]

This issue occurs again in 2.15.9.

[joshmakar]

Same warning here

I've updated my package.json file with the following to skip version 2.15.9 which has the props issue. This way when the next release comes out, it will get installed and hopefully not contain the issue.

"element-ui": ">2.15.9 || 2.15.8",

[boluo600]

Version 2.15.8 doesn't have this error, can use it

> npm uninstall element-ui
> npm install [email protected] -s

[dhemiwc]

Removing the prop entirely from the NewPopper might cause some issue no?

Surely replacing the createdAt hook code that sets the value with a prop default value factory function would be more suitable?

const NewPopper = {
  props: {
    appendToBody: Popper.props.appendToBody,
    offset: Popper.props.offset,
    boundariesPadding: Popper.props.boundariesPadding,
    arrowOffset: Popper.props.arrowOffset,
    placement: {
      type: Popper.props.placement.type,
      default: function() {
        return PLACEMENT_MAP[this.align] || PLACEMENT_MAP.left;
      }
    },
    transformOrigin: Popper.props.transformOrigin
  },
  methods: Popper.methods,
  data() {
    return merge({ visibleArrow: true }, Popper.data);
  },
  beforeDestroy: Popper.beforeDestroy
};

[lqzhgood]

Removing the prop entirely from the NewPopper might cause some issue no?

Surely replacing the createdAt hook code that sets the value with a prop default value factory function would be more suitable?

const NewPopper = {
  props: {
    appendToBody: Popper.props.appendToBody,
    offset: Popper.props.offset,
    boundariesPadding: Popper.props.boundariesPadding,
    arrowOffset: Popper.props.arrowOffset,
    placement: {
      type: Popper.props.placement.type,
      default: function() {
        return PLACEMENT_MAP[this.align] || PLACEMENT_MAP.left;
      }
    },
    transformOrigin: Popper.props.transformOrigin
  },
  methods: Popper.methods,
  data() {
    return merge({ visibleArrow: true }, Popper.data);
  },
  beforeDestroy: Popper.beforeDestroy
};

Your suggestion is good
The difference between them is: placement is a data or props
the placement is not in the docs. if set in props need more test, so I think placement set a data is better.

and the code is 6 years old , I think is not have bug.

element/packages/date-picker/src/picker.vue

Line 297 in 06392ad

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

---

placement show in data is better.

element/packages/date-picker/src/picker.vue

Lines 399 to 406 in acfc93a

	data() {
	return {
	pickerVisible: false,
	showClose: false,
	userInput: null,
	valueOnOpen: null, // value when picker opens, used to determine whether to emit change
	unwatchPickerOptions: null
	};

[barry1102]

俺也一样，别用2.15.9，用2.15.7或者2.15.8

[huangshihu1992]

Element UI 版本回退到 2.15.7

npm 卸载 element-ui npm i [email protected] -s

it work! thanks!

[xinguanhua]

@lqzhgood 你好，我是element-ui官方维护团队的xinguanhua，非常感谢你以pr的方式，为element-ui组件库的完善贡献了一份力量。element-ui有一份礼物将会寄给你，希望能够提供寄件地址及联系方式，可以发送邮件到 [email protected]。

[lqzhgood]

@lqzhgood 你好，我是 element-ui 官方维护团队的 xinguanhua，非常感谢你以 pr 的方式，为 element-ui 组件库的完善贡献了一份力量。element-ui 有一份礼物将会寄给你，希望能够提供寄件地址及联系方式，可以发送邮件到 [email protected]。

邮件已发送