Vue.js将道具传递给数据

我有2个组件：Post和Comments。Vue.js将道具传递给数据

里面的邮件组件，有评论组件有3个道具：postId,numCom（评论数）和comments（数组）。

我得到的意见和我通过道具的阵列，现在我想要检索的注释组件阵列，并将其添加到数据，所以我可以再添加/删除评论等

这里是我的代码Comments.vue：

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

但这不起作用。在Vue开发人员工具中，我可以看到comments prop充满了评论，但allComments数组为空。

我该怎么办？

来源

2017-07-10 Learn Css

你确定了'comments'道具拥有当时被创建的组件的值？ –

我们需要看到更多的代码，因为我举了一个例子，它为我工作。 https://jsfiddle.net/7xxwq1e2/18/ – Stephen

@DecadeMoon是的，有一点延迟，因为我正在做GET请求，然后填充道具...我应该如何解决这个问题？我可以在Comments组件中执行一个GET请求，但是当我显示一个新帖子时，如何从Post控件触发Comments组件中的一个函数？ –

它看起来像comments道具没有在组件创建的时候（这是唯一的一次allComments将被设置）的值。

您可以：

推迟创建部件，直到comments支柱是通过使用v-if这样准备：

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

注意对comments支柱的更改并将allComments设置为新值（除初始化allComments数据功能）：

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

来源

2017-07-10 23:12:33

完美工作。谢谢！ –

Vue.js将道具传递给数据

回答

相关问题