I'm utilizing Vuex for state management in my web application. I encountered an issue while trying to delete a document from my Firestore database - clicking the button does not trigger any action.
Here is a snippet of the card header containing a delete icon, meant to delete the document upon clicking:
<div class="card">
<div class="card-header card-head-color">
<span class="card-header-text"
>{{ stock.name }} <small>(Price: {{ stock.price }})</small></span
>
<i
class="fa fa-trash-alt float-right trash-icon"
aria-hidden="true"
@click="deleteStock(stock.key)"
></i>
</div>
The mutation for deleting a stock is defined as follows:
DELETE_STOCK(id) {
db.collection("stocks")
.doc(id)
.delete()
.then(() => {
console.log("Document Deleted!");
});
},
The action for deleting a stock is structured like this:
deleteStock: ({ commit }, id) => {
commit("DELETE_STOCK", id);
},
This is where the deleteStock action is invoked within the template's methods section:
deleteStock(id) {
this.$store.dispatch("deleteStock", id);
},
Despite setting up everything correctly, clicking on the delete icon doesn't trigger any response.