want to show loading text before submitting using Vue.js

Question

i want to show loading text when click submit button and before the form submit. i tried this code.

<button type="button" @click="addCustomers" 
:disabled="disableSubmitButton" class="btn btn-primary" style="float: 
right;" value="ADD CUSTOMER">{{customer.loading ? "Loading..." : "ADD 
CUSTOMER"}}</button>

after i add a loading object in data.

data(){
  return {
    loading: false,
  }
}

when i call to my click event function i add "loading = true" to display my loading text.

but this process not working. how can i show it. i don't want any spinner loading packages in vuejs. this is my click event function.

addCustomers(){
   customer.loading = true;
   axios.post(){
     ....
   }
}

Boussadjra Brahim · Accepted Answer · 2019-08-22 10:08:53Z

3

the customer data element is not mentioned in data object property, so your code should be like :

 <button type="button" @click="addCustomers" 
 :disabled="disableSubmitButton" class="btn btn-primary" style="float: 
 right;" value="ADD CUSTOMER">{{loading ? "Loading..." : "ADD 
 CUSTOMER"}}</button>

and in the methods:

 addCustomers(){
   this.loading = true;
    axios.post().then(res=>{
         this.loading=false;
       }).catch(err=>{
        //handle error
       })
  }

edited Aug 22, 2019 at 10:08

answered May 5, 2019 at 9:23

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MJ DEV Over a year ago

can i add this to a timeout

Boussadjra Brahim Over a year ago

i think that you want something like i did in my edited answer

Collectives™ on Stack Overflow

want to show loading text before submitting using Vue.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related