如何显示评论组件的不同评论集？ （VueJS，Firebase）

Question

我正在尝试创建一个社交媒体应用，并在每个帖子上添加评论。

我可以显示评论，但是每个帖子都显示相同的评论集。

我正在努力弄清楚如何在每个帖子上显示不同的评论集。

非常感谢您的帮助！

Github代码here

Answer 1

我看到了这里的问题：您应该在不同帖子的评论之间添加某种分隔方法。

示例：

无分隔：

1. 用户>帖子不错
2. 用户2>这是一个很酷的帖子
3. 第三名>哇，好酷！
4. 用户>帖子不错
5. 用户5>这是一个很酷的帖子
6. 第六名>哇，酷！
7. 用户>帖子不错
8. 用户8>这是一个很酷的帖子
9. 第9个>哇，酷！

带分隔符：

1. 帖子1>用户>好帖子
2. 帖子3>用户2>这是一个很棒的帖子
3. 帖子2>第三名>哇，酷！
4. 帖子3>用户>好帖子
5. 帖子1>用户5>这是一个很棒的帖子
6. 帖子2>第六名>哇，酷！
7. 帖子2>用户>好的帖子
8. 帖子1>用户8>这是一个很酷的帖子
9. 帖子3> 9号>哇，好酷！

如何解决：

为帖子ID添加匹配项，然后将帖子ID添加到每个帖子中。

并使用以下命令在CommentForm.vue中更改脚本：

export default {
  data() {
    return {
      username: null,
      comment: null,
      post: null,
    };
  },
  name: "CommentForm",
  methods: {
    onPost() {
      let commentContent = {
        name: this.username,
        comment: this.comment,
        post: this.post
      };
      this.$emit("comment-posted", commentContent),
        (this.username = null),
        (this.comment = null),
        (this.post = null);
    },
  },
};