0

Im calling 3 functions on @click, Im doing it like that:

<CButton
  @click=" getBillPrice();
           updateBill();
           postData();"
  type="submit"
  color="primary">Save</CButton>

And it is important for to call first the getBillPrice(), then updateBill() and then postData(). But this functions are running in the wrong order, first the updateBillPrice is running then postData() and then getBillPrice()

How can I fix it? Here are some of my functions. This is text to be able to post so much code, you can just skip this text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

getBillPrice() {
  if (this.data.billid.trim() == "Please Select") {
    return;
  }
  /*getting data from bill*/
  axios
    .get(this.APIServer + "bills/" + this.data.billid, {
      headers: { Authorization: this.$store.state.token },
    })
    .then((response) => {
      if (response.status === 200) {
        this.data.billPrice = response.data.netPrice;
        this.data.billTaxClass = response.data.taxClass;
        this.data.billPriceTotal = response.data.totalPrice;
        console.log("got the get");
      }
    })
    .catch((e) => {
      console.log("API failed");
      console.log(e);
    });
  /*END________*/
},


updateBill() {
  if (
    this.data.amount.trim() == "" ||
    this.data.price.trim() == "" ||
    this.data.title.trim() == "" ||
    this.data.billid.trim() == "Please Select"
  ) {
    return;
  }
  /*Update bill query */
  let updateData = {
    netPrice: Number(this.data.billPrice) + Number(this.data.totalPrice),
    totalPrice:
      (Number(this.data.billPrice) + Number(this.data.totalPrice)) *
        Number(this.data.taxClass) +
      (Number(this.data.billPrice) + Number(this.data.totalPrice)),
  };
  axios
    .patch(this.APIServer + "bills/" + this.data.billid, updateData, {
      headers: { Authorization: this.$store.state.token },
    })
    .then((response) => {
      if (response.status === 200) {
        console.log("bill updated");
      }
    })
    .catch((e) => {
      console.log("API failed");
      console.log(e);
    });
  /*END________*/
},


postData() {
      if (
        this.data.amount.trim() == "" ||
        this.data.price.trim() == "" ||
        this.data.title.trim() == "" ||
        this.data.billid.trim() == "Please Select"
      ) {
        return;
      }

      /*Post item */
      let postData = {
        amount: Number(this.data.amount),
        bill: {
          id: this.data.billid,
        },
        price: Number(this.data.price),
        title: this.data.title,
        totalPrice: Number(this.data.totalPrice),
      };
      axios
        .post(this.APIServer + "items", postData, {
          headers: { Authorization: this.$store.state.token },
        })
        .then((response) => {
          if (response.status === 201) {
            console.log("item posted");
            this.move("/items");
          }
        })
        .catch((e) => {
          console.log("API failed");
          console.log(e);
        });
      /*END________*/
    },
Ostap Filipenko
  • 235
  • 5
  • 21

1 Answers1

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
  • 830
  • 4
  • 13
  • thank you ffor your answer, but im getting this error: [Vue warn]: Error in v-on handler: "ReferenceError: regeneratorRuntime is not defined" found in ---> at src/views/layout/CreateItem.vue at src/containers/TheContainer.vue at src/App.vue – Ostap Filipenko Feb 27 '21 at 19:13
  • ReferenceError: regeneratorRuntime is not defined at VueComponent.onSubmit (CreateItem.vue?bada:224) at invokeWithErrorHandling (vue.esm.js?a026:1863) at HTMLButtonElement.invoker (vue.esm.js?a026:2184) at HTMLButtonElement.original._wrapper (vue.esm.js?a026:7565) – Ostap Filipenko Feb 27 '21 at 19:13
  • Oh i think in your Vuejs project async await is not supported, you haven't setup babel i guess. Please check this [issue](https://stackoverflow.com/questions/60435086/using-the-async-await-pattern-in-vue-js) – Mohib Arshi Feb 27 '21 at 19:27
  • Now i have that error: [Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'then' of undefined" found in ---> at src/views/layout/CreateItem.vue at src/containers/TheContainer.vue at src/App.vue – Ostap Filipenko Feb 27 '21 at 19:38
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/229301/discussion-between-mohib-arshi-and-ostap-filipenko). – Mohib Arshi Feb 27 '21 at 19:39