更换Vue中 对象的数据后,双向绑定失效。

数据结构为:

data{
  return {
    propertyInfo: {
        propertyCategory: "", // 放盘分类Int32
        subCategory: [], //小分类In32
        rentalType: '1', //租售类型 sale1 rent2
        propertyNo: '', // 楼盘编号
        salePrice: '',  //售价
        rentPrice: '', // 租价
        saleForm: '',// 绿白表
        buildingArea: '', //建筑面积
        saleableArea: '', //使用面积
        isLinkParking: false, //带车位
        beginRentTime: '', //起租日
        rentLabel: [], //租房-其他
        gscopeFaCode: '',
        gscopeCode: '',//区域板块
        estateName: '', //楼盘名繁体
        estateNameEN: '', //楼盘名英文
        estateAddress: '', //楼盘地址繁
        buildingName: '',//栋座及单元
        buildingAge: '', //楼龄
        roomNumber: '', //房间数目
        unitFloor: '', //单位楼层
        titleEN: '',//标题(英文)
        titleCN: '', //标题(繁体)
        //......
    },
  }
}

需要从接口获取到数据后 重新赋值给 propertyInfo。

this.axios.get(xxx).then(res => {
    if (res.data.code === 0 && res.data.result) {
    this.propertyInfo = res.data.result
}
Object.assign(this.propertyInfo, res.data.result(接口数据))

1.尝试了Vue.$set是可以的 但是鉴于属性太多 觉得for循环 $set不是特别好
2.尝试了 Object.assign 后赋值.数据双绑还是失效。

想问问各位有没有什么好的解决方案呢

阅读 4.4k
2 个回答
✓ 已被采纳新手上路,请多包涵

问题已经解决。
定义一个计算属性,名字可以随便起。return 一下对象

computed: {

demo: {
  get: function () {
    return this.propertyInfo;
  }
}

}

在接口给返回值的时候 直接赋值就可以了
this.propertyInfo = apiData

至于原因,我也不是特别明白,我觉得是以为 计算属性的特征:当依赖的值发生变化的时候,计算属性会从新计算

this.propertyInfo = Object.assign({}, this.propertyInfo, res.data.result(接口数据))
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题