problem deleting document Vuejs Firestore

Question

I am creating site for my store and learning Vue js at the same time. I'm having a problem with delete product using id. I'm using Vue js 3 and Firebase 9.

I have this on main.j

const dataBase = collection(db, "products");

and this on products.js

import { dataBase } from '../main';
import { addDoc, deleteDoc, onSnapshot, doc } from "firebase/firestore";

export default {
  name: "Products",
  props: {
    msg: String
  },
  data() {
    return {
      products: [],
      product: {
        name: '',,
        price: '',
        brand: '',
        category: ''
      }
    }
  },
  methods: {
    saveData() {
      try {
        addDoc(dataBase, this.product).then((docRef) => {
          console.log("Document written with ID: ", docRef.id);
        })
      } catch (e) {
        console.error("Error adding document: ", e);
      }
    },
    deleteProduct(doc) {
      if (confirm('Видалити ?')) {
        deleteDoc(doc(dataBase, "products", docRef.id));
      } else {

      }
    }
  },
  created() {
    onSnapshot(dataBase, (snapshot) => {
      snapshot.docs.forEach((doc) => {
        this.products.push({ ...doc.data(), id: doc.id })
      })
    });
  }
};

Thanks!

It is really hard to help without more debugging information. I recommend setting a breakpoint on each line, running the code in the debugger, and then checking the value of each variable on each line it hits. When you do that: what is the first line where a variable has a different value from what you expected? — Frank van Puffelen
– Frank van Puffelen, Commented Jun 30, 2022 at 14:41

Mina · Accepted Answer · 2022-06-30 12:03:10Z

1

I think it's a typo issue, instead of docRef.id you need right doc.id

deleteProduct(doc) {
  if (confirm('Видалити ?')) {
    deleteDoc(doc(dataBase, "products", doc.id));
  } else {

  }
}

answered Jun 30, 2022 at 12:03

Mina

17.8k3 gold badges24 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

VolodymyrPTK Over a year ago

I've tried it but it doesn't work. Thank you anyway

Collectives™ on Stack Overflow

problem deleting document Vuejs Firestore

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related