2017-07-17 1 views
1

私のVueコンポーネントは、ユーザーに電子メールの入力を要求します。データバインディングにv-modelを使用しています。アドニスでhttpリクエストを使用してVueフォーム入力をAdonisコントローラに送信する方法

<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を得るための正しい方法がどうあるべきか?

答えて

1

1)NPMは、あなたのVUEのjsのメインファイル

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

Vue.use(VueResource); 

3で)VUE-リソース--save

2をインストールする)は、このようなあなたのコンポーネントファイル

<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> 
を変更します
関連する問題