I am currently developing a web application that allows users to add and remove notifications.
To facilitate the deletion process in Firestore, I have included an ID field in the notification document, which is also added to the data-id attribute in the DOM. This allows me to use the .where method to locate the document and delete it.
However, a challenge arises when I call the getNotifications() function to update the DOM. It appears that there is a slight delay in deleting the document, causing getNotifications() to execute before the document is fully removed. As a result, the deleted notification may still be displayed on the DOM.
I attempted a solution by adding a 100-millisecond timeout before calling the function, which seemed to work, but it does not feel like the most optimal approach.
Does anyone have a better solution to this issue? Any assistance would be greatly appreciated! :)
export default {
data() {
return {
messages: []
}
},
methods: {
getNotifications() {
const self = this;
const db = firebase.firestore()
this.messages = [];
db.collection("messages").get()
.then(function(snapshot){
snapshot.forEach(function(doc){
self.messages.push(doc.data());
})
})
},
deleteNotification(e) {
const self = this;
const id = e.target.parentElement.parentElement.getAttribute("data-id");
const db = firebase.firestore()
db.collection("messages").where("id", "==", id).get()
.then(function(res) {
res.forEach(function(doc) {
doc.ref.delete();
console.log("Document deleted")
})
})
.then(function() {
self.getNotifications();
})
.catch(function(error) {
console.log("Error deleting document: ", error)
})
}
},
created() {
this.getNotifications()
}
}