I use vue2+element to do a background, the product management page has a table, click the add button pop-up dialog, which is nested an el-form, the form is a child component, the form has a drop-down box, the option options is obtained asynchronously through the parent component, the child component can update prop data, but the view cannot be updated.
it doesn"t work to put data updates in the this.$nextTick in the parent component code
parent component code
<el-dialog
:title="`${formMode==="create"?"":""}`"
top="10vh"
:visible.sync="dialogVisible"
:close-on-press-escape="false"
:before-close="handleDialogClose"
v-loading="true"
>
<goods-form
ref="goodsForm"
:formData.sync="formData"
:opts="formOpts"
:formLoading="formLoading"
/>
<template slot="footer" class="dialog-footer">
<el-button
type="primary"
:loading="submitLoading"
@click="handleSubmit"
>{{ this.formMode==="create"?"":"" }}</el-button>
<el-button type="warning" @click="handleCancel"></el-button>
</template>
</el-dialog>methods:{
async getOptsData() {
try {
const res = await GetOptsData();
console.log("optsData-->>", res);
// this.$nextTick(() => {
// this.formOpts = { ...res };
this.formOpts = Object.assign({}, res);
console.log("formOpts-->>", this.formOpts);
// });
} catch (err) {
msg.notify({
type: "error",
message: ""
});
}
},
handleCreate() {
this.formMode = "create";
this.getOptsData();
this.dialogVisible = true;
this.$nextTick(() => {
//
this.$refs["goodsForm"].resetForm();
this.formTemp = { ...this.$refs["goodsForm"].ruleForm };
});
}
}subcomponent code
...
<el-form-item label="">
<m-select
:selectedValue.sync="ruleForm.brand"
:placeholder=""""
:filterable="true"
:clearable="true"
:selectOptions="formOpts.brandOpts"
/>
</el-form-item>
...props: {
...
opts: {
type: Object,
default() {
return {
brandOpts: [],
keywordsOpts: []
};
}
}, //
...
computed: {
formOpts() {
console.log("formOpts changed-->>", this.opts);
return this.opts;
}
},expected effect
"" dialogoptions
