如何评估 data 属性中的 Vue.js 组件道具？答案

【问题标题】：How to evaluate Vue.js component props in the data property?如何评估 data 属性中的 Vue.js 组件道具？
【发布时间】：2017-12-14 19:36:43
【问题描述】：

我有 2 个组件：Post 和 Comments。

在 Post 组件内部，有一个 Comments 组件，它有 3 个 props：postId、numCom（cmets 数量）和comments（数组）。

我得到 cmets 并使用 props 传递数组，现在我想在 Comments 组件中检索数组并将其添加到数据中，以便我可以添加/删除 cmets 等。

这是我在Comments.vue中的代码：

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

但这不起作用。在 Vue 开发者工具中，我可以看到 comments 属性被 cmets 填充，但 allComments 数组是空的。

我该怎么办？

【问题讨论】：

你确定 comments 属性在组件创建时有值吗？
我们需要查看更多代码，因为我整理了一个示例并且它对我有用。 jsfiddle.net/7xxwq1e2/18
@DecadeMoon 是的，有一点延迟，因为我正在做 GET 请求，然后填充道具......我应该如何解决这个问题？我可以在 Comments 组件中执行 GET 请求，但是当我显示新帖子时，如何从 Post 控制器触发 Comments 组件中的功能？

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

看起来comments 属性在组件创建时没有值（这是唯一一次设置allComments）。

您可以：

使用 v-if 将组件的创建推迟到 comments 属性准备好，如下所示：

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

注意comments 属性的变化并将allComments 设置为新值（除了在数据函数中初始化allComments）：

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

【讨论】：