CODEWITHSUNDEEP
javascriptlaravelvue.jsvuejs2vue-component
MJ DEV
MJ DEV

Reputation: 704

want to show loading text before submitting using Vue.js

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(){
     ....
   }
}

Upvotes: 0

Views: 2485

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

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

Upvotes: 3

Related Questions