如何使vuejs点击事件保持同步

Question

我有这个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>

它创建一个输入元素，如：

[当用户单击'+'或'-'时，我调用Vuejs增量（item）或减量（item）Vuejs方法，在这些方法中，我调用updateCart函数：

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

您可以在该函数中看到axios.post调用，在该调用之后，我正在等待结果并将结果放入json变量。问题是：当用户单击+或-多次单击事件不同步时，它没有等到第二次单击之后才处理了第一次单击。如何使点击事件保持同步。谢谢

Answer 1

您无法使事件同步。即使您可以做到，这也会使UI冻结，这不是您想要的。

一种更好的方法是在请求进行中时将按钮disable并在收到响应后将其启用。因为您使用的是div，所以可以根据请求的状态为它设置不同的样式。

在loading上添加data标志

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

根据标志的值设置css类

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

根据您的方法更新标志

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
  ...