Question

我正在尝试从Firestore删除文档，但是我认为它没有文档ID。

当我单击v-btn时，没有得到：key的ID。

在这里，我从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数据（）

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
                            })
                        }
                    })
                })
            }
        })
    }

Answer 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数组时，您需要添加文档ID：

this.shopItem.push({
    id: doc.id,
    product: doc.data().product,
    catogorie: doc.data().catogorie,
    price: doc.data().price
})

Firestore / Vuejs：无法从Firestore文档中删除

1 个答案: