vue2父组件异步向子组件传值，子组件视图不更新

Question

我使用vue2+element做一个后台，商品管理页有一个表格，点击添加按钮弹出dialog，里面嵌套了一个el-form，表单是子组件，表单里面有下拉框，选项options是通过父组件异步获取的，子组件能更新prop数据，但是视图无法更新。

把数据更新放在父组件代码里面的this.$nextTick里面也没作用

父组件代码

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

子组件代码

...
<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;
    }
  },

预期效果

每次点击“添加”按钮弹出dialog时，从后端数据库获取下拉框options数据，更新子组件对应的组件数据，现在这种方式子组件能获取到数据，但是视图不更新。

Answer 1

我已经自己解决了，是我自己坑了自己。我表单里面的select组件是封装的el-select，然后表单本身也封装成一个子组件了，我只监听了select组件的选中值，没有监听options选项变化，加上就行了

Answer 2

我有时候这样才更新到视图去了

Answer 3

<m-select
      v-if="formOpts.brandOpts.length"
      :selectedValue.sync="ruleForm.brand"
      :placeholder="'选择或搜索'"
      :filterable="true"
      :clearable="true"
      :selectOptions="formOpts.brandOpts"
    />