Nicht definierte Requisiten in Vue js Kindkomponente. Aber nur in seinem Skript

Question

Ich habe gerade angefangen, Vue zu benutzen und etwas unerwartetes Verhalten zu erfahren. Beim Übergeben von Requisiten von einem Elternteil an die Kindkomponente konnte ich auf die Requisite in der Vorlage des Kindes zugreifen, aber nicht auf das Skript des Kindes. Wenn ich jedoch die v-if-Anweisung in der Eltern-Vorlage (Master-Div) verwendete, konnte ich sowohl im untergeordneten Skript als auch in der untergeordneten Vorlage auf die Requisite zugreifen. Ich wäre dankbar für eine Erklärung hier, gibt es eine bessere Strukturierung dieses Codes? Siehe untenstehenden Code. Vielen Dank.

Geordnete Komponente:

<template> 
<div v-if="message"> 
<p> 
{{ message.body }} 
</p> 
<answers :message="message" ></answers> 
</div> 
</template> 

<script> 
    import Answers from './Answers'; 
    export default { 
    components: { 
     answers: Answers 
    }, 
    data(){ 
     return { 
     message:"" 
     } 
    }, 
    created() { 
     axios.get('/message/'+this.$route.params.id) 
     .then(response => this.message = response.data.message); 
    } 
    } 
</script> 

Kinder Komponente

<template> 
    <div class=""> 
    <h1>{{ message.id }}</h1> // works in both cases 
    <ul> 
    <li v-for="answer in answers" :key="answer.id"> 
     <span>{{ answer.body }}</span>  
    </li> 
    </ul> 
    </div> 
</template> 

<script> 
    export default{ 
    props:['message'],  
    data(){ 
     return { 
     answers:[] 
     } 
    },  
    created(){ 
     axios.get('/answers/'+this.message.id) //only worls with v-if in parent template wrapper 
     .then(response => this.answers = response.data.answers); 
    } 
    } 
</script> 

Answer 1

this.message.id funktioniert nur mit v-if weil manchmalmessage ist kein Objekt.

Der Aufruf, den Sie in der übergeordneten Komponente vornehmen, der das Nachrichtenobjekt abruft, ist asynchron. Das bedeutet, dass der Aufruf nicht abgeschlossen ist, bevor die untergeordnete Komponente geladen wird. Wenn Ihre untergeordnete Komponente geladen wird, message="". Das ist kein Objekt mit einer id Eigenschaft. Wenn message="" und Sie versuchen, this.message.id auszuführen, erhalten Sie einen Fehler, da keine id Eigenschaft von Zeichenfolge vorhanden ist.

Sie könnten weiterhin v-if verwenden, die wahrscheinlich am besten ist, oder die Ajax-Aufruf in Ihrem Kind Komponente verhindert die Ausführung, wenn message kein Objekt ist, während es an updated bewegen.