Vue.js Requisiten an Daten übergeben

Question

Ich habe 2 Komponenten: Post und Comments.

Innerhalb Post-Komponente, gibt es Kommentare Komponente, die 3 Requisiten hat: postId, numCom (Anzahl der Kommentare) und comments (Array).

ich Kommentare und gebe ich das Array mit Requisiten, und jetzt will ich das Array in Kommentare Komponente abzurufen und zu Daten hinzufügen, so kann ich dann hinzufügen/entfernen Kommentare usw.

Hier ist mein Code in Comments.vue:

props: ['id', 'numCom', 'comments'], 
data: function() { 
    return { 
    newMessage: "", 
    loading: false, 
    allComments: this.comments, 
    num: this.numCom, 
    } 
}, 

Aber das funktioniert nicht. In Vue Entwickler-Tools kann ich sehen, dass comments Prop ist mit Kommentaren gefüllt, aber allComments Array ist leer.

Was soll ich tun?

Answer 1

Es sieht so aus, als hätte die Property comments zum Zeitpunkt der Erstellung der Komponente keinen Wert (dies ist der einzige Zeitpunkt, an dem allComments gesetzt wird).

Sie können entweder:

1. Aufschieben die Schaffung der Komponente bis zur comments prop ist bereit, von v-if wie folgt aus:

<comments v-if="comments" :comments="comments"></comments> 

2. Achten Sie auf Änderungen an der comments Stütze und setzen Sie allComments auf den neuen Wert (zusätzlich zur Initialisierung allComments in der Datenfunktion):

watch: { 
    comments(value) { 
    this.allComments = value; 
    } 
}