Element resetFields() does not take effect

Question

I used Vue3 with Element Plus to created Form.But The form's resetFields() does not take effect. the form cant auto refresh.

---

child-component(Edit.vue)

<template>
    <el-dialog title="edit" v-model="modelValue">
      <el-form :model="form" ref="formDate">
      ...
      </el-form>
    </el-dialog>
</template>

parent-component

<template>

<Edit
  v-model:form="form"
  v-model="dialogFormVisible"
  ref="editDialog"
></Edit>

</template>
...
export default {
  components: {
    Edit,
  },
  setup() {
      const state = reactive({
        dialogFormVisible: false,
      })

      const editDialog = ref(null);

      const initForm = () => {
        state.dialogFormVisible = true;

        nextTick(() => {
        console.log(editDialog.value.formDate);
        editDialog.value.formDate.resetFields();
      });

      return {
        ...toRefs(state),
        editDialog,
        initForm,
      };
  }

editDialog.value.formDate was not undefined :enter image description here

But editDialog.value.formDate.resetFields() does not take effect,and it was undefined .

Answer 1

Try to change

editDialog.value.formDate.resetFields()

to

editDialog.value.formDate.value.resetFields()