Firestore / Vuejs: не удается удалить из документа Firestore

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