如何使用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> 

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

'use strict'; 

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

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

Answer 1

1）NPM安装VUE资源--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>