Перезагрузка страницы перед завершением операции (чаще всего) - Vue и Firebase - PullRequest
Новая
       8

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

1 голос
/ 14 марта 2020

Что-то не так. Нет ошибки, но когда я нажимаю кнопку sh, она редко загружает страницу с обновленным статусом. это происходит в двух отдельных похожих компонентах в приложении 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();
    })

}

1 Ответ

1 голос
/ 14 марта 2020

Вы должны правильно связать различные обещания, а также использовать 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(), чтобы управлять ошибками и информировать вашего конечного пользователя.

...