Vue2 data中整体属性替换失败的问题

先贴代码

class Main extends Vue {
  basicInfo: BasicInfo = {
    wordCount: 0,
    tomatoCount: 0,
    completedTodoCount: 0,
    uncompletedTodoCount: 0,
    updateTime: "1970-01-01 00:00:00",
  };
...
  async created() {
    await this.updateBasicInfo();
  }

  async updateBasicInfo() {
    let resp = await this.axios.get("/api/user/basicInfo");
    this.basicInfo.wordCount = resp.data;
  }
}

vue组件中需要数据,需要在ajax中获取,请求返回的类型正好就是BasicInfo的类型,所以用了this.basicInfo.wordCount = resp.data;直接做了替换,在devtool看到data更新了

img

绑定的子组件prop也变了

img

但是页面却没有重新渲染,数值还是0,请问一下有什么方法可以解决吗

this.basicInfo= {...this.basicInfo,wordCount:resp.data}

wordCount最开始你定义的是数字类型 你接收返回的数据是对象 改成一致就行