[英]Firestore/Vuejs: Can't delete from Firestore document
I'm trying to delete a doc from Firestore, but I think it doens't get the document id.我正在尝试从 Firestore 中删除一个文档,但我认为它没有获取文档 ID。
When I click on the v-btn it don't get the id of the :key.当我点击 v-btn 时,它没有得到 :key 的 ID。
Here I get the data from the Firestore database这里我从 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() Vue js 数据()
shopItem: [],
product: '',
catogorie: '',
price: '',
userId: '',
I got this from a other page (same project) what works but this function gives me only a error.我从另一个页面(同一个项目)得到了这个,但这个功能只给了我一个错误。
Here is my Vue js methods这是我的 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
})
}
})
})
}
})
}
You're pushing the shop items with:您正在推送商店商品:
this.shopItem.push({
product: doc.data().product,
catogorie: doc.data().catogorie,
price: doc.data().price
})
So they have three properties: product
, catogorie
[sic] and price
.因此它们具有三个属性:
product
, catogorie
[sic] 和price
。 Since you're not adding an id
property, your view returns undefined
when you do deleteItem(shopItems.id)
later.由于您没有添加
id
属性,因此当您稍后执行deleteItem(shopItems.id)
时,您的视图将返回undefined
。
So you'll want to add the document ID when you push the data to the shopItem
array:因此,当您将数据推送到
shopItem
数组时,您需要添加文档 ID:
this.shopItem.push({
id: doc.id,
product: doc.data().product,
catogorie: doc.data().catogorie,
price: doc.data().price
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.