Перезагрузка страницы перед завершением операции (в большинстве случаев) - Vue и Firebase


Перезагрузка страницы перед завершением операции (в большинстве случаев) - Vue и Firebase

14.03.2020 06:37:22 Просмотров 86 Источник

Что-то здесь не так. Ошибки нет, но когда я нажимаю на кнопку, она редко загружает страницу с обновленным статусом. это происходит в двух отдельных подобных компонентах в POS-приложении. Я хочу изменить текущего продавца, используя кнопку в таблице продавцов.

КОМПОНЕНТ ПРОДАВЦОВ-HTML. ВНУТРИ ТАБЛИЦЫ

  <tbody class="text-left">
    <tr v-for="(seller, index) in sellers" :key="index">
      <td v-if="!seller.active">
        <button class="btn btn-outline-success" @click="activateSeller(seller)">
          <i class="fas fa-user-check"></i>
        </button>
      </td>
      <td v-if="seller.active">
        <i class="fas fa-check"></i>
      </td>
    </tr>
  </tbody>

СКРИПТ

activateSeller(seller) {
  db.collection("sellers")
    .where("active", "==", true)
    .get()
    .then(snapshot => {
      snapshot.docs.forEach(doc => {
        db.collection("sellers")
          .doc(doc.id)
          .set(
            {
              active: false
            },
            { merge: true }
          );
      });
    })
    .then(() => {
      db.collection("sellers")
        .where("number", "==", `${seller.number}`)
        .get()
        .then(snapshot => {
          snapshot.docs.forEach(doc => {
            db.collection("sellers")
              .doc(doc.id)
              .set(
                {
                  active: true
                },
                { merge: true }
              );
          });
        });
    })
    .then(() => {
      location.reload();
    })

}
У вопроса есть решение - Посмотреть?

Ответы - Перезагрузка страницы перед завершением операции (в большинстве случаев) - Vue и Firebase / Page reloading before completing the operation (most of the times) - Vue and Firebase

Renaud Tarnec

14.03.2020 07:28:27

Вы должны правильно цеплять различные обещания, а также использовать Promise.all(), чтобы дождаться завершения всех параллельных записей, как показано ниже:

  function activateSeller(seller) {
    const sellerColl = db.collection('sellers');

    sellerColl
      .where('active', '==', true)
      .get()
      .then(snapshot => {
        const promises = [];
        snapshot.forEach(doc => {
          promises.push(doc.ref.set({ active: false }, { merge: true }));
        });
        return Promise.all(promises);
      })
      .then(() => {
        return sellerColl.where('number', '==', `${seller.number}`).get();
      })
      .then(snapshot => {
        const promises = [];
        snapshot.forEach(doc => {
          promises.push(doc.ref.set({ active: true }, { merge: true }));
        });
        return Promise.all(promises);
      })
      .then(() => {
        location.reload();
      });
  }

Обратите внимание, что вместо Promise.all() вы можете использовать пакетную запись, но имейте в виду, что существует ограничение максимум на 500 операций в пределах одной пакетной записи.


Обратите также внимание, что вы можете закончить свою цепочку обещаний с помощью catch(), чтобы управлять ошибками и информировать своего конечного пользователя.

Помочь в развитии проекта:
Закрыть X