Comment évaluer Vue.js composant d'accessoires dans la propriété data?

J'ai 2 composants: Post et Comments.

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

Je reçois des commentaires et j'ai passer le tableau avec les accessoires, et maintenant je veux récupérer le tableau dans les Commentaires de la composante et l'ajouter aux données afin que je puisse ensuite ajouter/supprimer des commentaires, etc.

Voici mon code dans Comments.vue:

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

Mais cela ne fonctionne pas. En Vue de développeur des outils que je peux voir que comments prop est rempli avec des commentaires, mais allComments tableau est vide.

Que dois-je faire?

  • Êtes-vous sûr que le comments prop a une valeur à la fois le composant est créé?
  • Nous aurons besoin de voir plus de code car j'ai jeté un exemple et sa fonctionne pour moi. jsfiddle.net/7xxwq1e2/18
  • ouais, il y a un peu de retard, parce que je fais requête GET, puis remplir les accessoires... Comment dois-je résoudre ce problème? Je pourrais faire une requête GET à l'intérieur de Commentaires, mais comment ai-je pu déclencher une fonction dans les Commentaires composant de contrôleur Post quand je l'affiche d'un nouveau poste?
InformationsquelleAutor Miha Vidakovic | 2017-07-10
  1. 18

    Il ressemble à la comments prop n'ont pas de valeur au moment de la création (qui est le seul temps allComments sera réglé).

    Vous pouvez soit:

    1. Différer la création du composant jusqu'à ce que le comments prop est prêt en utilisant v-if comme ceci:
    <comments v-if="comments" :comments="comments"></comments>
    1. Surveiller les modifications apportées à la comments prop et set allComments à la nouvelle valeur (en plus de l'initialisation de allComments dans les données de la fonction):
    watch: {
  comments(value) {
    this.allComments = value;
  }
}
    InformationsquelleAutor Decade Moon