gpt4 book ai didi

javascript - 如何评估数据属性中的 Vue.js 组件 Prop ?

转载 作者:可可西里 更新时间:2023-11-01 01:31:39 24 4
gpt4 key购买 nike

我有 2 个组件:PostComments

在 Post 组件中,有 Comments 组件,它有 3 个属性:postIdnumCom(评论数)和 comments(数组) .

我收到评论并通过 props 传递数组,现在我想在 Comments 组件中检索数组并将其添加到数据中,这样我就可以添加/删除评论等。

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

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

但这行不通。在 Vue 开发人员工具中,我可以看到 comments 属性充满了评论,但是 allComments 数组是空的。

我该怎么办?

最佳答案

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

您可以:

  1. 通过使用 v-if 将组件的创建推迟到 comments 属性准备就绪,如下所示:
<comments v-if="comments" :comments="comments"></comments>
  1. 观察 comments 属性的变化并将 allComments 设置为新值(除了在数据函数中初始化 allComments 之外):
watch: {
comments(value) {
this.allComments = value;
}
}

关于javascript - 如何评估数据属性中的 Vue.js 组件 Prop ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45022705/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com