vue中表单赋值无法响应式，输入框无法改变值

开发中碰到，使用element-ui输入框时无法赋值，输入无反应

原因：

1.细节性错误

使用el-form标签时，其中的el-form-item对应的prop属性值，v-model绑定值，data对象中的字段值三者出现不一致

代码示例

html:

<el-form-item prop="name">
	<el-input v-model="form.name"></el-input>
</el-form-item>

js:

data(){
  return {
    form:{
      name:''
    }
  }
}

2.语法错误

还有一种情况就是，当我们的表单需要绑定是字段太多，我们没有直接将初始化字段在表单对象中写好，而是使用空对象进行代替

代码：

//正常情况
data(){
  return {
    form:{
      name:'',
      age:'',
      sex:''
      //......等更多属性
    } 
  }
}

//直接采用空对象初始化
data(){
  return {
    form:{}
  }
}

上面的情况，当你通过this.form.name='张三',去赋值时，虽然赋值可以成功，但是当你在el-input的输入框内输入时，是不起作用的

原因是，我们直接采用了空对象初始化的形式，来初始化对象，这样对象中的字段在赋值的时候是不存在响应式的

解决办法：

this.$set(this,'form',realFormData)

可以通过this.$set()的方式来将对象进行响应式的赋值

this.$set()方法中:

• 第一个参数是你需要设置data中的属性的外层，这里我要设置的是data中的form，按照原来的赋值写法就是this.form='xx',那么form的外层就是this,
• 第二个参数就是你要设置的具体对象，注意使用字符串的形式，这里我要对form属性进行设置，需要就填写form
• 第三个参数就是相当于你要设置的实际值

对应起来就是 this.from.name='mike' ==> this.$set(this.form,'name','mike')