current position:Home>[Vue] asynchronous problem of component value transfer -- the sub component gets the data slowly

[Vue] asynchronous problem of component value transfer -- the sub component gets the data slowly

2022-05-15 02:10:23Triumph-light

The emergence of problems :

Before writing static pages , Pass values directly from parent to child , It can directly render the value from the parent component to the child component , But with the request , There's a problem , When the component is created and rendered , The value of the subcomponent is obtained , The sub component does not update the template in real time ( It's a disaster. It always slows me down !!!)

Cause of occurrence :

In subcomponent created、mounted Only once , When the parent component initializes , A null value has been passed to the subcomponent , When the asynchronous request data changes , The value of the subcomponent no longer changes .

terms of settlement :

When he didn't send a request to get the data , Don't let him create subcomponents and pass values to it , So add a v-if Instructions to limit whether he can create subcomponents , Similar to the idea of throttling .
Follow the code , Let's show you how to solve

data In the data

      flag: false

In the requested method

    //  Get student data 
    async getInfo () {
      const {
     data: res } = await getTwoStudentApi(this.id1, this.id2)
      this.student1 =[0]
      this.student2 =[1]
      this.flag = true
      //  After searching, clear the search box 
      this.id1 = ''
      this.id2 = ''

At sub assembly

<GraghDescription :student="student1" v-if="flag"></GraghDescription>

The error reporting in the following article is somewhat similar , It's all about asynchronous data , Finally, it's time to solve this big problem 、、、、 The code is hard , Write a blog to record ,
 Insert picture description here

copyright notice
author[Triumph-light],Please bring the original link to reprint, thank you.

Random recommended