通过POST axios vue传递多个参数

时间:2017-07-23 18:13:42

标签: javascript laravel-5 vuejs2 axios

我正在尝试使用axios将props值和表单值传递给后端控制器。但它只发送表单值而不是props值。我的代码是 -

<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>

在控制台中它只显示注释,而不是支持值:

enter image description here

如何传递两个值?

提前致谢

1 个答案:

答案 0 :(得分:4)

这里我得到了解决方案。

<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>