как сделать событие клика vuejs синхронным - PullRequest
Новая
       22

как сделать событие клика vuejs синхронным

0 голосов
/ 26 апреля 2020

У меня есть это 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>

Создает элемент ввода, например:

enter image description here

Когда пользователь нажимает на '+' или '-' я вызываю методы приращения (элемент) или декремента (элемент) 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){

Как вы можете видеть в этой функции, я есть вызов ax ios .post, после этого вызова я жду результата и помещаю результат в переменную json. Проблема в том, что когда пользователь нажимает на + или - несколько раз, событие клика не является синхронным, он не ждал, пока первый клик не будет обработан после второго клика. Как я могу сделать событие клика, чтобы быть синхронным. Спасибо

1 Ответ

1 голос
/ 26 апреля 2020

Вы не можете сделать событие синхронным. Даже если бы вы могли это сделать, пользовательский интерфейс зависнет, а это не то, что вам нужно.

Лучше всего будет 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
  ...
...