Insert Child Comments Of Parent Post Vue Js

i am using laravel 5.4 and vue 2.0. I need to insert comments of parent posts like facebook. I want to pass 'post id' from parent to child template to insert comments of that paren

Solution 1:

Since you are passing a prop using :post="post.id" declare a props property in your comment-input component like this:

<script>exportdefault {
        props: ['post']
        data() {
            return {
                form: newForm({comment: ''})
            }
        },

        methods: {
            onSubmit() {
                this.form
                    .post('/comments')
                    .then(post =>this.$emit('completed', comment));
            }
        }
    }
</script>

Then you can use the prop in the component using this.post

I am refactoring your code a little bit so that it is easy to understand

Pass the postId as a prop named postId so that it is easily recognizble

<comment-input :postId="post.id" @completed='addRecentComment'></comment-input>

Then in your comment-input component declare the props propert like this

props: ['postId']

and finally your comment-input component

<template><form @submit.prevent='onSubmit'><divclass="media-comment"><inputtype="text"v-model='comment'class="form-control"placeholder="comment..."></div></form></template><script>exportdefault {
        props: ['postId'],
        data() {
            return {
                comment: ''
            }
        },

        methods: {
            onSubmit() {
                axios.post('api_url/' + this.postId, {comment: this.comment})
                    .then(response => {
                        this.$emit('completed', this.comment);
                        this.comment = ''; // reset back to empty
                    });
            }
        }
    }
</script>

• you don't need exta @keyup event on input since the default behaviour of pressing enter in text input inside a form will submit you form

• you can just bind the input's v-model to empty comment in your data option