[Vuejs]-How to call functions successively on button @click [VUE JS]

by

7👍

✅

I think instead of putting each and every function on the click event, you should create a single function that in turn trigger these functions.

<CButton
  @click="onSubmit"
  color="primary">Save</CButton>

methods: {
  onSubmit(){
    this.getBillPrice();
    this.updateBill();
    this.postData()
  },
  ...
}

And if your functions are asynchronous then you can use async await with try catch

methods: {
  async onSubmit(){
    try{
      await this.getBillPrice();
      await this.updateBill();
      this.postData()
    } catch(err){
      // Handle error.
    }

  },
  ...
}

Since it seems that async await is not supported in your project, you can try this. ( i don’t have that much experience in then catch but it should work )

methods: {
  onSubmit(){
    this.getBillPrice()
    .then(() => {
       return this.updateBill()
    })
    .then(() => {
       return this.postData()
    })
    .then(() => {
       // Any other code if needed
    })
    .catch((err) => {
       // Handle error scenario
    })

  },
  ...
}
👤Mohib Arshi

Leave a comment