how to make vuejs click event to be synchronous

Question

i have this html

 <div class="input-group-prepend">
                    <span class="input-group-text" @click="decrement(item)">-</span>
                  </div>

                  <input type="text" v-model="item.quantity" class="form-control w-25" aria-label="Product quantity">

                  <div class="input-group-append">
                    <span class="input-group-text" @click="increment(item)">+</span>
                  </div>

It creates an input element like:

When user clicks on '+' or '-' i am calling increment(item) or decrement(item) Vuejs methods, in that methods i am calling updateCart function:

async  updateCart(item, quantity){
                let q = quantity + item.quantity;
                let data = {
                    quantity: q,
                    id: item.key
                }
                let startedQuantity=q; 
               let json = await axios.post('/cart/change.js', data );               
               if(json.status === 200){

As you can see in that function i have axios.post call, after that call i am waiting for result and putting the result to json variable. The problem is: when user clicks on + or - multiple times click event is not synchronous, it didn't wait until first click is processed after that process second click. How can i make click event to be synchronous. Thanks

Whenever a user will click multiple times on a button, it will be hit multiple times. because the functions is being called multiple times. You just disable the click event if click has already been triggered and if response comes back enable it again — Abdul Basit
– Abdul Basit, Commented Apr 26, 2020 at 7:54
Abdul Basit Thank you for your response. As you said i have disabled the click event if click has already been triggered and if response comes back enabled it again. — Davit Azizyan
– Davit Azizyan, Commented Apr 26, 2020 at 11:06

Radu Diță · Accepted Answer · 2020-04-26 08:42:34Z

2

You can't make the event synchronous. Even if you could do it, this will make the UI freeze, which not what you want.

A better approach is to disable the button while the request is in flight and enable it back after you get a response. Because you're using divs you could style it differently depending on the state of the requests.

Add a loading flag on your data

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

Set css class depending on the flag's value

<div class="input-group-prepend"
     v-bind:class="{ disabled: loading }" >

Update the flag from your methods

async updateCart(item, quantity){
  if(this.loading) {
   return
  }

  this.loading = true

  let q = quantity + item.quantity;
  let data = {
    quantity: q,
    id: item.key
  }
  let startedQuantity=q; 
  let json = await axios.post('/cart/change.js', data );  

  this.loading = false
  ...

answered Apr 26, 2020 at 8:42

Radu Diță

14.3k2 gold badges33 silver badges37 bronze badges

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

1 Comment

Davit Azizyan Over a year ago

Radu Diță, Thank you, i have solved the issue using your approach

Collectives™ on Stack Overflow

how to make vuejs click event to be synchronous

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related