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

JavaScript Vue.js

JinJin

2020-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为空。

我该怎么办？

第3866篇《如何评估data属性中的Vue.js组件道具？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共1个回答
小小 2020.03.30

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

您可以：

  1. 使用以下命令推迟组件的创建，直到comments道具准备就绪v-if：
<comments v-if="comments" :comments="comments"></comments>
  1. 观察commentsprop的更改并设置allComments为新值（除了allComments在data函数中初始化）：
watch: {
  comments(value) {
    this.allComments = value;
  }
}

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android