Pass multiple parameter by POST axios vue

Question

I am trying to pass a props value and an form value to the backend controller using axios. But it only sends form value not the props value. My code is -

<template>
    <form @submit.prevent='onSubmit'>
        <div class="media-comment">
            <input type="text" v-model='form.comment' class="form-control" placeholder="comment...">
        </div>
    </form>
</template>

<script>
    export default {
        props: ['postId'],

        data() {
            return {
                form: new Form({comment: ''}),
                id: this.postId
            }
        },

        methods: {
            onSubmit() {
                console.log(this.postId); // it shows the value in console but the value doesnt pass
                this.form
                    .post('comments', this.data)
                    .then(post => this.$emit('completed', comment));
            }
        }
    }
</script>

in console it shows only the comment, not the prop value:

How to pass both value ??

thanks in advance

Solution

here i got the solution.

<template>
    <form @submit.prevent='onSubmit'>
        <div class="media-comment">
            <input type="text" v-model='comment' class="form-control" placeholder="comment...">
        </div>
    </form>
</template>

<script>
    export default {
        props: ['postId'],

        data() {
            return {
                comment: ''
            }
        },

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

Comments

[Phorce]

Have you tried '.post({post: this.data, id: this.id}'

[Bert]

comment is not defined because its... not defined. You should use this.$emit('completed', this.comment).

[Wahidul Alam]

Thanks brother.. working good but with a huge error .. screenshot : ibb.co/gqWFfQ

[Duy Anh]

@WahidSherief based on the screenshot, it seems that there is a variable "name" in the "dashboard" component that is reactive, and on component load the name is not defined yet (pending request to backend?). To fix you can place the part inside the v-if