VueJS-Rückgabewert von "Versprechen" im Methodenabschnitt der Komponente

Question

Die folgende Funktion setzt this.personStatus für alle Komponenten v-bind. Wie kann ich eine einzelne comm-person Komponente oder mehrere comm-person Komponenten abhängig von dem Ergebnis der axios.post aktualisieren?

Der Template-Extrakt für eine Person, ist dies:

<comm-person 
    v-for="person in people" 
    v-show="(!pollActive) || isParticipant(person)" 
    :participant="pollActive && isParticipant(person)" 
    :status="personStatus" 
    :key="person.id" 
> 
<div class="checkbox-wrap"><input :disabled="pollActive" :value="person" v-model="selectedPeople" type="checkbox"></div> 
<div @click="togglePerson(person)" class="name">{{person.given_name}} {{person.family_name}}</div> 
<div class="phone-number">{{person.phone}}</div> 
</comm-person> 

z.B: :status="personStatus"

data() { 
    return { 
     pollText: '', 
     primaryButton: { 
      border: `2px solid ${iiColor('ii-green')}`, 
     }, 
     secondaryButton: { 
      border: `2px solid ${iiColor('ii-grey')}`, 
     }, 
     people: [], 
     safeUsers: [], 
     unsafeUsers: [], 
     selectedPeople: [], 
     polledPeople: [], 
     pollActive: false, 
     messages: [], 
     msgType: 'SMS', 
     personStatus: '?' 
    }; 
}, 
.. 
.. 
methods: { 
getStatus(person) { 

     axios.post(`${config.iiApiUrl[process.env.NODE_ENV]}/person/find`, { 
      id: person.id, 
     }).then((resp) => { 

      console.log('handle response...'); 
      console.log(resp.data.ref); 

      if(resp.data.ref != null) { 

       if (this.safeUsers.includes(resp.data.ref)) { 
        console.log('person is safe'); 
        this.personStatus = 'safe'; 
       } 
       if (this.unsafeUsers.includes(resp.data.ref)) { 
        console.log('problem with person'); 

        this.personStatus = 'safe'; 
       } 
      } 
      else { 
       return '?'; 
      } 
     }); 
    }, 
} 

Aber die this.personStatus aus dem axios.post Aufruf aktualisiert alle Komponenten. Wie kann ich je nach Ergebnis ein oder zwei aktualisieren?

Bitte helfen Sie !!

Answer 1

Zuerst gibt post ein Versprechen zurück und es wird asynchron ausgeführt. getStatus wird zurückgegeben, bevor die anonyme Funktion, die Sie an post übergeben, aufgerufen wird. Es kann den Zeichenfolgenwert nicht zurückgeben. Damit der Aufrufer getStatus() den Wert der zurückgegebenen Zeichenfolge abrufen kann, müssen Sie then() verwenden. Ich schlage vor, Sie asynchrone Programmierung und Versprechungen in Javascript ein wenig weiter zu Callbacks zu verstehen und wenn sie ausgeführt werden.

Zweitens sollten Sie normalerweise keine Requisite an das Ergebnis einer Methode/Funktion binden. Props sollten fast immer an ein Datenfeld gebunden oder berechnet werden.

Ich schlage vor, Sie ändern den Post-Handler, um ein Datenfeld zu setzen und stattdessen an diesen zu binden.

:status="personsStatus" 

data: { 
    return { 
     person: ??, //i dont know where this comes from 
     personStatus: 'unknown', //some default value. maybe '?' 
    }; 
}, 
mounted() { 
    this.loadStatus(this.somePerson); 
}, 
methods: { 
    loadStatus(person) { 
     axios.post(...) 
      .then((resp) => { 
       //your more complex logic here, 
       //but instead of returning a string, 
       //set the personStatus field like the following: 
       this.personStatus = 'safe'; 
      }); 
    } 
} 

diese Arbeit zu tun Dies kann Sie benötigen eine untergeordnete Komponente zu erstellen, wenn Sie mehrere person Instanzen haben.