Vue JS Ajax Form Submit Tutorial

Vue js ajax form submit example; Through this tutorial, i am going to show you how to use ajax for form submission using on button click in vue js app.

How to Submit Form using Ajax in Vue JS

Use the following steps and submit form using ajax with button click in vue js app:

• Step 1 – Create New VUE JS App
• Step 2 – Install Library For Ajax
• Step 3 – Create Component
• Step 4 – Add Component on main.js

Step 1 – Create New VUE JS App

Start your terminal or cmd and run the following command to create new vue js app:

vue create my-app

Step 2 – Install Library For Ajax

Run the following commands on terminal or command prompt to install vue axios in your vue js app:

cd my-app

npm install --save axios vue-axios

Step 3 – Create Component

Go to /src/components directory and create a new component called HelloWorld.vue and add the following code into it:

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Vue Axios Post Example - laratutorials.com</div>
    
                    <div class="card-body">
                        <form @submit="formSubmit">
                        <strong>Name:</strong>
                        <input type="text" class="form-control" v-model="name">
                        <strong>Description:</strong>
                        <textarea class="form-control" v-model="description"></textarea>
    
                        <button class="btn btn-success">Submit</button>
                        </form>
                        <strong>Output:</strong>
                        <pre>
                        {{output}}
                        </pre>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
     
<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        },
        data() {
            return {
              name: '',
              description: '',
              output: ''
            };
        },
        methods: {
            formSubmit(e) {
                e.preventDefault();
                let currentObj = this;
                this.axios.post('http://localhost:8000/your-post-api', {
                    name: this.name,
                    description: this.description
                })
                .then(function (response) {
                    currentObj.output = response.data;
                })
                .catch(function (error) {
                    currentObj.output = error;
                });
            }
        }
    }
</script>

Step 4 – Add Component on main.js

Go to /src/ directory and main.js file. And then add the following code into it:

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
    
Vue.use(VueAxios, axios)
   
Vue.config.productionTip = false
   
new Vue({
  render: h => h(App),
}).$mount('#app')

Conclusion

Vue js ajax form submit example; Through this tutorial, You have learned how to use ajax for form submission using on button click in vue js app.

Recommended VUE JS Tutorials