#javascript #firebase #vue.js #google-cloud-firestore
#javascript #firebase #vue.js #google-облако-firestore
Вопрос:
Я пытаюсь удалить документ из Firestore, но я думаю, что он не получает идентификатор документа.
Когда я нажимаю на v-btn, он не получает идентификатор ключа :.
Здесь я получаю данные из базы данных Firestore
<v-row v-for="shopItems in shopItem" :key="shopItems.id">
<v-col>
<p>{{shopItems.product}}</p>
</v-col>
<v-col>
<p>{{shopItems.catogorie}}</p>
</v-col>
<v-col>
<p>{{shopItems.price}}</p>
</v-col>
<v-col>
<v-btn @click="deleteItem(shopItems.id)">X</v-btn>
</v-col>
</v-row>
Vue js data()
shopItem: [],
product: '',
catogorie: '',
price: '',
userId: '',
Я получил это с другой страницы (того же проекта), что работает, но эта функция выдает мне только ошибку.
Вот мои методы Vue js
methods: {
deleteItem(doc) {
db.collection("StoreCart").doc(doc).delete().then(function() {
console.log("Document successfully deleted!");
// location.reload()
}).catch(function(error) {
console.error("Error removing document: ", error);
});
}
},
created() {
firebase.auth().onAuthStateChanged(userId => {
if(userId) {
this.userId = firebase.auth().currentUser.uid;
db.collection("StoreCart").get().then((res) => {
res.docs.map((doc) => {
// console.log(doc.data().userId)
if(doc.data().userId == this.userId) {
this.product = doc.data().catogorie
this.catogorie = doc.data().catogorie
this.price = doc.data().price
this.shopItem.push({
product: doc.data().product,
catogorie: doc.data().catogorie,
price: doc.data().price
})
}
})
})
}
})
}
Комментарии:
1. При переполнении стека не делитесь изображениями текста. Скопируйте текст в вопрос и отформатируйте его так, чтобы его было легко читать, копировать и искать.
2. Спасибо, спасибо. Я изменю его.
Ответ №1:
Вы нажимаете элементы магазина с:
this.shopItem.push({
product: doc.data().product,
catogorie: doc.data().catogorie,
price: doc.data().price
})
Таким образом, у них есть три свойства: product
, catogorie
[sic] и price
. Поскольку вы не добавляете id
свойство, ваше представление возвращается undefined
, когда вы делаете deleteItem(shopItems.id)
это позже.
Итак, вы захотите добавить идентификатор документа при отправке данных в shopItem
массив:
this.shopItem.push({
id: doc.id,
product: doc.data().product,
catogorie: doc.data().catogorie,
price: doc.data().price
})
Комментарии:
1. Хорошо, теперь я понял. Вот почему он не работал. Спасибо за вашу помощь.