vue修改表单数据 不回显

不回显代码如下：

data(){
	return{
		form: {},
		}
}

handleUpdate(row) {
      this.reset();
      const userId = row.userId || this.ids;
      getUser(userId).then(response => {
      	this.form = response.data;
        this.postOptions = response.posts;
        this.roleOptions = response.roles;
        this.form.postIds = response.postIds;
        this.form.roleId = response.roleIds[0];
        this.open = true;
        this.title = "修改用户";
        this.form.password = "";
      });
    },

可以回显的代码

data(){
	return{
		form: {},
		}
}

handleUpdate(row) {
      this.reset();
      const userId = row.userId || this.ids;
      getUser(userId).then(response => {
        response.data.postIds = response.postIds;
        response.data.roleId = response.roleIds[0];
      	this.form = response.data;
        this.postOptions = response.posts;
        this.roleOptions = response.roles;
        // this.form.postIds = response.postIds;
        // this.form.roleId = response.roleIds[0];
        this.open = true;
        this.title = "修改用户";
        this.form.password = "";
      });
    },

由于表单数据较多，所以我们在定义data的时候直接定义为空对象进行初始化，这样对象中的字段在赋值的时候是不存在响应式的

解决方式：
1.如上代码：直接给form表单赋值，不单独给某个属性赋值；
2.如果想单独赋值，使用this.$set(this.form,“roleId”,response.roleIds[0])
this. $set(this.form,"roleId",response.roleIds[0])