-1

I'm trying to create a social media app with comments on each post.

I can display comments, but each post displays the same set of comments.

I'm struggling to figure out how I can display different sets of comments on each post.

Would really appreciate help!

Github code here

William Prigol Lopes
  • 1,803
  • 14
  • 31
Tao Shimomura
  • 1
  • 1
    Welcome to Stack Overflow! Your code is behind links, which means it can't be searched by people who have the same question as you in the future. Please have a read of [this guide on producing code for a good quality question](https://stackoverflow.com/help/minimal-reproducible-example), then include and mark up your code in your question. Cheers! – Joundill Jun 02 '20 at 02:01

1 Answers1

0

I see the problem you have here: you should add some method of separation between comments on different posts.

Example:

Without separation:

  1. A user > Nice post
  2. User 2 > This is a cool post
  3. The 3rd > Wow, cool!
  4. A user > Nice post
  5. User 5 > This is a cool post
  6. The 6th > Wow, cool!
  7. A user > Nice post
  8. User 8 > This is a cool post
  9. The 9th > Wow, cool!

With separation:

  1. Post 1 > A user > Nice post
  2. Post 3 > User 2 > This is a cool post
  3. Post 2 > The 3rd > Wow, cool!
  4. Post 3 > A user > Nice post
  5. Post 1 > User 5 > This is a cool post
  6. Post 2 > The 6th > Wow, cool!
  7. Post 2 > A user > Nice post
  8. Post 1 > User 8 > This is a cool post
  9. Post 3 > The 9th > Wow, cool!

How to fix:

Add a match for a post id, and add the post ids to each post.

And change the script in CommentForm.vue with this:

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);
    },
  },
};
JMoore2007
  • 51
  • 4