vue element UI 无法重置表单表单问题

<el-dialog title="添加用户" :visible.sync="addFormVisible" center width="400px" custom-class="addDialog" :modal="false" @close="addClose">
      <el-form ref="add" :model="addForm" :rules="addRules" :hide-required-asterisk="true">
        <el-form-item label="用户名" label-width="70px" prop="name">
          <el-input v-model="addForm.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="用户类型" label-width="70px" prop="role">
          <el-select v-model="addForm.role" placeholder="选择用户角色">
            <el-option label="管理员" value="1" />
            <el-option label="教师" value="2" />
            <el-option label="辅导员" value="3" />
            <el-option label="学生" value="4" />
            <el-option label="访客" value="5" />
          </el-select>
        </el-form-item>
        <el-form-item label="用户密码" label-width="70px" prop="password">
          <el-input v-model="addForm.password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="电话号码" label-width="70px" prop="phone_number">
          <el-input v-model="addForm.phone_number" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addFormVisible = false">取 消</el-button>
        <el-button type="primary" plain @click="addUser">确 定</el-button>
      </div>
    </el-dialog>

这是表单 之前的写法：重点！！！表单里的属性不能复制为‘ ’，一个空格也不能有，否则无法重置表单。

 addForm: { // 添加用户表单
        name: ' ',
        role: ' ',
        password: ' ',
        phone_number: ' '
 },

这是修改后的表单，this.$refs.add.resetFields()就没问题了。 

 addForm: { // 添加用户表单
        name: '',
        role: '',
        password: '',
        phone_number: ''
 },