Comment évaluer les accessoires du composant Vue.js dans la propriété data?

Question

J'ai 2 composants: Post et Comments.

À l'intérieur du composant Post, il y a le composant Commentaires qui a 3 accessoires: postId, numCom (nombre de commentaires) et comments (tableau).

Je reçois des commentaires et je passe le tableau avec des accessoires, et maintenant je veux récupérer le tableau dans le composant Commentaires et l'ajouter aux données afin que je puisse ensuite ajouter/supprimer des commentaires, etc.

Voici mon code en Comments.vue:

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

Mais cela ne fonctionne pas. Dans Vue outils de développement, je peux voir que comments prop est rempli de commentaires, mais que le tableau allComments est vide.

Que devrais-je faire?

Answer 1

Il semble que l'accessoire comments n'ait pas de valeur au moment de la création du composant (qui est le seul moment où allComments sera défini).

Vous pouvez soit:

1. Différez la création du composant jusqu'à ce que la propriété comments soit prête en utilisant v-if comme ça:

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

2. Surveillez les modifications apportées à la propriété comments et définissez allComments sur la nouvelle valeur (en plus d'initialiser allComments dans la fonction de données):

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