如何使用 http 请求将 Vue 表单输入发送到 Adonis 控制器答案

【问题标题】：How to send Vue form input to Adonis controller using an http request如何使用 http 请求将 Vue 表单输入发送到 Adonis 控制器
【发布时间】：2017-12-21 12:28:08
【问题描述】：

所以，我的 Vue 组件要求用户输入他的电子邮件。我正在使用v-model 进行数据绑定。

<template>
    <input v-model="email" type="text" placeholder="Email" />
    <button class="tiny">Send</button>
</template>
<script>
    export default {
        data: function () {
            return {
                email: ''
            }
        }
    }
</script>

我在 Adonis 中的 MailController 应该能够接收用户的电子邮件作为输入。我想象过这样的事情：

'use strict';

class MailController {
    *mail (request, response) {
     const email = request.input('email');
    }
}

获取email的正确方法应该是什么？

【问题讨论】：

标签： javascript vue.js axios vuex adonis.js

【解决方案1】：

1.) npm install vue-resource --save

2.) 在你的 vue 的主 js 文件中

var Vue = require('vue');
var VueResource = require('vue-resource');

Vue.use(VueResource);

3.) 像这样更改您的组件文件

<template>
    <input v-model="email" type="text" placeholder="Email" />
    <button @click="submit()" class="tiny">Send</button>
</template>

<script>
    export default {
        data: function () {
            return {
                email: ''
            }
        },

        methods: {
            submit: function() {
                this.$http.post('/your-url', {email: this.email})
                    .then(
                        (response) => {
                            console.log(response);
                        },

                        (error) => {
                            console.log(error);
                        }
                    );
            }
        }
    }
</script>

【讨论】：