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!
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 {
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.