Example of Vue Axios Post Request

This entry was posted on Friday March 6, 2020

Right now, will lean how to send http demand utilizing axios in vue js. we will send post demand with parameter as exhibit or structure information in vue cli npm application. here will be basic case of axios post demand in vue js application without any preparation. 

we generally pick axios to call programming interface in vue js application. 

axios is a http customer library. axios give to send get, post, put, erase demand with parameter, formdata, headers, string, picture, multipart/structure information and so forth axios is a great library for http demands. 

right now, will make straightforward structure with two info fields in vue js application. at that point we will shape submit demand by utilizing axios http post demand with following information parameter. You can likewise see clear to how to send http post demand. 

Along these lines, how about we see cry model advance. Ensure you have to make one POST demand programming interface for this model.

 

Step 1: Create Vue JS App

In this step, we need to create vue cli app using bellow command:

vue create my-app

 

Step 2: Install vue-axios package

Here we need to install vue-axios npm package for send post request using axios.

npm install –save axios vue-axios

 

Step 3: Use vue-js-toggle-button

We need to use vue-axios package in main.js file of vue js app.

src/main.js

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

Step 4: Update HelloWorld Component

Here, we will create HelloWorld.vue component with following code.

src/components/HelloWorld.vue

<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 – ItSolutionStuff.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/yourPostApi’, {

                    name: this.name,

                    description: this.description

                })

                .then(function (response) {

                    currentObj.output = response.data;

                })

                .catch(function (error) {

                    currentObj.output = error;

                });

            }

        }

    }

</script>

 

Now you can run vue app by using following command:

npm run serve

Get more info from here: https://www.npmjs.com/package/vue-axios.

I hope it can help you…