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

Question

因此，我的 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的正确方法应该是什么？

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

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

How to send Vue form input to Adonis controller using an http request

javascript

vue.js

axios

vuex

adonis.js