javascript - 如何让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方法，在该方法中我正在调用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 卡住，这不是您想要的。

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

在您的数据上添加loading标志

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