Hey everyone! I'm facing a challenge with deleting a "product." Although the product is successfully removed from the database, I'm encountering an issue with removing it from the VuexStore array of products. Here's what I've tried so far:
The action below is being dispatched and is effectively deleting the product:
removeProduct({ commit }, payload) {
commit(REMOVE_PRODUCT)
axios.delete(`${API_BASE}/product/${payload}`, payload).then(response => {
console.debug('response', response.data)
commit(REMOVE_PRODUCT_SUCCESS, response.data)
})
}
Below is my mutation where I attempt to locate the index of the product in the store based on its id:
[REMOVE_PRODUCT_SUCCESS]: (state, payload) => {
state.showLoader = false
const index = state.products.findIndex(p => p.id === payload)
state.products.splice(index, 1)
},
When I log
state.products.indexOf(product => product.id)Even when I change the payload from an object to just the id and use
state.products.indexOf(product => product.id)I would greatly appreciate any assistance or guidance on how to properly find the index of the product to be deleted from the array of products and splice it out of the list. Thanks!