Attach comments to specific post when click comments button vue js

Question

I am creating post-comment system where each post will have many comments. I want to fetch the comments of a specific post when click on 'comments' button alike facebook. I am using laravel 5.4 and Vue 2.0. I can fetch the comments of each post which now attaching to every post. I want to attach the child comments to its parent post. here my code:

<div class="post-section" v-for="post in posts">
        <post>{{post.body}}</post>
        <button @click="getComments(post)" class="btn btn-link">Comments</button>
    <div class="comment" v-for='comment in comments'>
        <p>
            <span>&nbsp; {{comment.comment}}</span>
        </p>
</div>

<script>
        export default {

            data() {
                    return {
                        posts: [],
                        comments: [],
                    }
            },

            created() {
                    Post.all(posts => this.posts = posts)
            },

            methods: {

                    getComments(post) {
                        axios.post('getcomments', {id: post.id}).then(response => {
                            console.log(response.data);
                            this.comments = response.data;
                        })
                    }
            }
        }

Thanks in advance for help !!

Vamsi Krishna · Accepted Answer · 2017-07-13 09:37:42Z

1

Since you are initializing comments: [ ] in the data option it is available to the whole component and you are looping through this comments for every post that is why you get comments displayed for all the posts.

So do it like this

<div class="post-section" v-for="(post, index) in posts">
        <post>{{post.body}}</post>
        <button @click="getComments(post, index)" class="btn btn-link">Comments</button>
    <div class="comment" v-for='comment in post.comments'>
        <p>
            <span>&nbsp; {{comment.comment}}</span>
        </p>
</div>

<script>
        export default {

            data() {
                    return {
                        posts: [],
                    }
            },

            created() {
                    Post.all(posts => this.posts = posts)
            },

            methods: {

                    getComments(post, index) {
                        axios.post('getcomments', {id: post.id}).then(response => {
                            console.log(response.data);
                            this.$set(this.posts, index, {...post, comments: response.data});
                        })
                    }
            }
        }

What is happening is:

pass the index of the post to the click handler to getComments as 2nd argument.
then use Vue.$set(your_array, index, newValue) to update that particular post item by adding extra comments property.
es6 spread operator is used to add the extra comments property to the existing post object in the array of posts

if you don't want to use you can use Object.assign()like this:

this.$set(this.posts, index, Object.assign({}, post, { comments: response.data }));

Here is the example fiddle

>

edited Jul 13, 2017 at 9:37

answered Jul 13, 2017 at 8:53

Vamsi Krishna

31.4k8 gold badges73 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Wahidul Alam Over a year ago

Thanks It works like charm !! @Vamsi Krishna . Bdw i am newbie in vuejs. it seems many new approaches in vue. how can i get a good reference to learn all the terms??

Vamsi Krishna Over a year ago

@WahidSherief the best place i would suggest is the official vue documentation coz they have very good docs and all the caveats and gotchas to look for while using vuejs.

Wahidul Alam Over a year ago

thanks bro i am goring through it .. here i am facing a small issue .. u can look at it : stackoverflow.com/questions/45098947/… @Vamsi Krishna

Collectives™ on Stack Overflow

Attach comments to specific post when click comments button vue js

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related