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

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 [原文如此] 和 price。由于您没有添加 id 属性，因此当您稍后添加 deleteItem(shopItems.id) 时，您的视图将返回 undefined。

因此，当您将数据推送到 shopItem 数组时，您需要添加文档 ID：

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