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

JinJin2020-03-30

我有2个组成部分：Post和Comments。

在Post组件内部，有Comment组件，它具有3个道具：postId，numCom（评论数）和comments（数组）。

我收到评论，并用道具传递数组，现在我想在评论组件中检索该数组并将其添加到数据中，以便随后添加/删除评论等。

这是我的代码Comments.vue：

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

但这是行不通的。在Vue开发人员工具中，我可以看到commentsprop充满了注释，但是allCommentsarray为空。

我该怎么办？

小小2020/03/30 18:25:23

看起来commentsprop在创建组件时没有值（这是唯一allComments设置的时间）。

您可以：

使用以下命令推迟组件的创建，直到comments道具准备就绪v-if：

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

观察commentsprop的更改并设置allComments为新值（除了allComments在data函数中初始化）：

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

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer