I have a problem with my app's delete feature. It successfully deletes items from the database, but there seems to be an issue in the front-end where I can't remove the correct items from the list.
Check out this demo:
https://i.sstatic.net/eA1h5.gif
You'll notice that although I tried to delete items 2 and 3, item 1 was removed instead.
Here's the relevant code snippet:
This section is commented out
toggleSelection(row) {
const myIds = this.multipleSelection.map((row) => row.id);
this.$confirm('This will permanently delete the items. Continue?', 'Warning', {
confirmButtonText: 'Yes',
cancelButtonText: 'Cancel',
type: 'warning',
center: true
}).then(() => {
axios.post('/api/wishlist/destroyMultiple/', {ids: myIds}).then((res) => {
this.$message({
showClose: true,
type: 'success',
message: res.data.success
});
this.wishlist.splice(this.wishlist.indexOf(row), 1) // The issue seems to be here
})
.catch((err) => {
this.$message({
showClose: true,
type: 'info',
message: err
});
});
}).catch(() => {
this.$message({
showClose: true,
type: 'info',
message: 'Delete canceled'
});
});
},
Can anyone provide insight on how to resolve this issue?