element表单重置不生效问题

element ul表单重置没有效果

el-dialog对话框的close事件触发函数促使表单resetFields()重置函数不生效，代码如下

<el-dialog
    v-model="dialogFormVisible"
    title="添加新用户"
    width="40%"
    @close="onDialogClosed"
  >
    <el-form
      label-width="auto"
      :model="ruleForm"
      :rules="formRules"
      ref="former">

  <el-form :model="form" :rules="rules" ref="former">
        <el-form-item label="姓名" label-width="80px" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="年龄" label-width="80px" prop="age">
          <el-input v-model="form.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form >

---

  methods: {
    // 关闭对话框,重置表单
    onDialogClosed() {
      console.log(1);
      this.$refs.former.resetFields();
    },

原因没有给每个表单属性配置prop属性,如下配置prop属性后resetFields()就生效了

  <el-form :model="form" :rules="rules" ref="former">
        <el-form-item label="姓名" label-width="80px" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="年龄" label-width="80px" prop="age">
          <el-input v-model="form.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form >