Vue JS Ajax Form Submit Example Tutorial

Vue js ajax form submit example. In this tutorial, you will learn how to use ajax with forms in vue js app.

This tutorial will guide you step by step on how to use ajax request with forms in vue js app. And you can easily pass form data with ajax post request in vue.js.

How to Submit Form using Ajax in Vue JS

Just follow the following steps and learn how to get checked checkbox value in vue js app with v-model:

• 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

In this step, open your terminal and execute the following command to create new vue js app:

vue create my-app

Step 2 – Install Library For Ajax

In this step, open your terminal and execute the following commands to install vue axios in your vue js app:

cd my-app

npm install --save axios vue-axios

Step 3 – Create Component

In this step, visit /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 - Tutsmake.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

In this step, visit /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. In this tutorial, you have learned how to use ajax with forms in Vue js app.

Recommended VUE JS Tutorials