El componente vue necesita datos y debe obtenerse en ajax. El tipo devuelto por la solicitud es exactamente el tipo de BasicInfo, por lo que se reemplaza directamente por this.basicInfo = resp.data; , y vi que los datos se actualizaron en la imagen del componente padre de devtool. El accesorio del componente secundario vinculado también ha cambiado la imagen del componente secundario. Pero la página no se vuelve a representar y el valor sigue siendo 0. ¿Hay alguna forma de resolverlo?
<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; } }Las propiedades de su objeto basicInfo no son reactivas , por lo que no hay cambios. Haga que las propiedades sean variables separadas y, cuando realice una solicitud http, descomponga los datos en esas variables.
PD: por ejemplo
<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; } }