Firestore/Vuejs: Can't delete from Firestore document

Question

I'm trying to delete a doc from Firestore, but I think it doens't get the document id.

When I click on the v-btn it don't get the id of the :key.

Here I get the data from the Firestore database

<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: '',

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

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

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. Since you're not adding an id property, your view returns undefined when you do deleteItem(shopItems.id) later.

So you'll want to add the document ID when you push the data to the shopItem array:

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