The problem of the failure of the overall property replacement in Vue2 data

Question

The vue component needs data and needs to be obtained in ajax. The type returned by the request is exactly the type of BasicInfo, so it is directly replaced by this.basicInfo = resp.data; , and I saw that the data was updated in devtool father component pic. The bound child component prop has also changed child component pic.But the page is not re-rendered, and the value is still 0. Is there any way to solve it?

<h3 class="title">
    <animated-number :value="basicInfo.tomatoCount"></animated-number>
</h3>
....
<div class="stats">
    {{ basicInfo.updateTime }}
</div>
...

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= resp.data;
  }
}

Answer 1

Your basicInfo object properties are not reactive so there is no change. Make the properties separate variables, and when you make an http request, decompose the data into those variables.

PS: for example

<h3 class="title">
  <animated-number :value="tomatoCount"></animated-number>
</h3>
....
<div class="stats">
  {{ updateTime }}
</div>
...

class Main extends Vue {
    wordCount: 0,
    tomatoCount: 0,
    completedTodoCount: 0,
    uncompletedTodoCount: 0,
    updateTime: "1970-01-01 00:00:00",

  async created() {
    await this.updateBasicInfo();
  }

  async updateBasicInfo() {
    const { data: tomatoCount, updateTime } = await this.axios.get("/api/user/basicInfo");
    this.tomatoCount = tomatoCount;
    this.updateTime = updateTime;
  }
}