element ui 输入框不能输入内容

原先代码

addUserForm只是一个空对象

   <!-- 内容主体区域 -->
    <el-form
      :model="addUserForm"
      :rules="addUserFormRules"
      ref="addUserFormRef"
      label-width="70px"
      label-position="left"
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="addUserForm.username"></el-input>
      </el-form-item>



  data() {
    return {
      addDialogVisible: false,
      addUserForm: {
       
      },
     
    }
  },

原因

无情的重新加载，多试试几次发现，input不能输入内容。是因为v-model绑定的属性丢失了。我默认创建的addUserForm这个对象是一个空对象，如果再加载出现延迟的时候，可能v-model没有加载到内容，然后输入框就不能输入内容

调试代码：将input框中的v-model属性删除，发现就不能输入内容了

  <el-form-item label="用户名" prop="username">
        <el-input  ></el-input>
      </el-form-item>

修改

给对象绑定对应的属性，及默认空字符串

   addUserForm: {
        username: '',
        password: '',
        email: '',
        mobile: ''
      },