Vue Js Loading Spinner Example After Submitting Form

Hello vue js developer in this example i will discuss about vue js loading or spinner example with axios request. in this request i will show you that when you will submit a form data then we will show a loading spinner using vue js. 

You can use it vue show loading while rendering types of work. That when you fetch much data then you can also show this loading spinner. And it makes our application more beautiful. So if you don't know how to use vue spinner example then this example tutorial is for you. 

Let's start

And in your script

export default {
    name: 'form-loading-spinner-example',
    data(){
        return{
            success: false,
            error: false,
            loading: false,
            formData : {
                title: null,
                body: null,
            }
        }
    },
    methods:{
            storePost(){
                this.loading = true,
                axios.post("https://jsonplaceholder.typicode.com/posts", this.formData)
                    .then((res) => {
                        this.reset();
                        this.success = true;
                        console.log(res);
                    })
                    .catch((error) => {
                        this.error = true;
                        console.log(error)
                    }).finally(() => {
                        this.loading =  false
                    });
            },

            reset(){
                this.success = false;
                this.error = false;
                for(let field in this.formData){
                    this.formData[field] = null;
                }
            }
    }
}

Now you can use of the loading data property in your template to disable all the form fields.

Now you have to add a new div named loader inside the component’s root div.

Include the following CSS to your vue component as like below

Hope it can help you.