问题遇到的现象和发生背景
使用 element 里面的 日期选择器报错 使用的是vue2
问题相关代码,请勿粘贴截图
<template>
<CommonForm :form="operateForm" :formLabel="operateFormLabel"></CommonForm>
</template>
<script>
import CommonForm from "../CommonForm.vue";
export default {
name: "Aside",
components: {
CommonForm,
},
data() {
return {
operateForm: {
name: "",
age: "",
sex: "",
birth: "",
addr: "",
},
operateFormLabel: [
{
model: "name",
label: "姓名",
type: "input",
},
{
model: "age",
label: "年龄",
type: "input",
},
{
model: "sex",
label: "性别",
type: "select",
opts: [
{
label: "男",
value: 1,
},
{
label: "女",
value: 0,
},
],
},
{
model: "birth",
label: "出生日期",
type: "date",
},
{
model: "addr",
label: "地址",
type: "input",
},
],
};
},
};
</script>
<template>
<el-form label-width="100px" :model="myForm" :inline="true">
<el-form-item
v-for="item in myFormLabel"
:key="item.label"
:label="item.label"
>
<el-date-picker
v-if="item.type === 'date'"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期"
v-model="myForm[item.label]"
>
</el-date-picker>
</el-form-item>
</el-form>
</template>
<script>
export default {
name: "CommonForm",
props: {
form: Object,
formLabel: Array,
},
data() {
return {
myForm: this.form,
myFormLabel: this.formLabel,
};
},
};
</script>
运行结果及报错内容
[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
<ElFormItem> at packages/form/src/form-item.vue
<ElForm> at packages/form/src/form.vue
<CommonForm> at src/components/CommonForm.vue
<ElDialog> at packages/dialog/src/component.vue
<Aside> at src/components/Aside/index.vue
<App> at src/App.vue
<Root>
我想要达到的结果
不报错误