CODEWITHSUNDEEP
javascriptvue.jsaxiosvuexadonis.js
Bargain23
Bargain23

Reputation: 1973

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

So, my Vue component asks for the user to input his email. I'm using v-model for data binding.

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

My MailController in Adonis should be able to receive the user's email as input. I imagined something like this:

'use strict';

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

What should be the correct way of getting email?

Upvotes: 1

Views: 513

Answers (1)

Nitesh Chauhan
Nitesh Chauhan

Reputation: 361

1.) npm install vue-resource --save

2.) In your vue's main js file

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

Vue.use(VueResource);

3.) Change your component file like this

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

Upvotes: 2

Related Questions