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