【vue】数据绑定失效

问题描述：

请求成功后，将请求下来的响应数据赋值给this.postForm，给this.postForm添加新的属性department并赋值，刚开始一切正常，第二天测试发现this.postForm.department数据绑定失效，具体表现为：

1. this.postForm.department是和一个select选择框绑定，选择这个select其他选项时，select的显示没有变化；
2. 查看报文发现this.postForm.department值已经变化；
3. 如果赋值时给this.postForm.department一个空字符串则数据绑定恢复正常。

代码如下：

systemManagement.getUserInfo({ userId: this.mesgId })
      .then(response => {
        this.postForm = response.data;
        this.postForm.department = this.postForm.depts[0].deptId;
      })
      .catch(err => {
        console.log(err);
      });

this.postForm中绑定的数据如下：

const defaultForm = {
  userName: '', // 用户名
  telephone: '', // 手机号
  email: '', // 邮箱
  description: '', // 备注
  department: '' // 部门
};
data() {
  return {
    postForm: Object.assign({}, defaultForm)
  };
}

响应数据如下：

{
	"data":{
        "description":"1234567",
        "telephone":"32412341",
        "userName":"002",
        "userId":276,
        "depts":[
            {
                "deptId":1,
                "deptName":"综合管理部"
            }
        ],
        "email":"[email protected]"
    }
}

问题原因：

目前还不清楚

解决方法：

把响应数据赋值给this.postForm前，先把数据都处理好

systemManagement.getUserInfo({ userId: this.mesgId })
          .then(response => {
            response.data.role = this.formatRole(response.data.roles);
            response.data.department = response.data.depts[0].deptId;
            this.postForm = response.data;
          })
          .catch(err => {
            console.log(err);
          });