【无标题】

项目场景：

例如：项目场景：element 表单无法输入

问题描述

提示：el-form中input 绑定值 但是无法输入任何东西：

      <el-form :model="formFpts"
               label-width="150"
      >
        <el-form-item label="手机号码">
          <el-input v-model="formFpts.phone"
                    placeholder="请输入手机号码"
                    autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="电子邮箱">
          <el-input v-model="formFpts.email"
                    placeholder="请输入电子邮箱"
                    autocomplete="off"
          />
        </el-form-item>
      </el-form>
 
export default {
  data () {
    return {
      formFpts:{}
    }
  }
}

---

原因分析：

原因：formFpts：{ }为空对象，根据官网说明：这样虽然可以显示值，但是不能修改

查询相关文档是这样说的：
原因：vue实列创建的时候 user的属性名并未声明，因此vue就无法给属性添加getter/setter，从而导致 user 并不是响应式的

---

解决方案：

解决办法：
方法1：给user给初始值 formFpts:{phone:“”,email:“”}
方法2：this.$set(this.formFpts,‘phone’,‘187****3400’)