如何让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>

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

当用户点击“+”或“-”时，我正在调用 increment(item) 或 decrement(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，所以您可以根据请求的状态设置不同的样式。

在您的 data

上添加一个 loading 标志

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

根据标志的值设置cssclass

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

如何让vuejs的点击事件同步

how to make vuejs click event to be synchronous

javascript

click

vue.js