I present it in this way
<tr v-for="(foodItem, index) in filteredFoodItems">
<td>{{ foodItem.name }}</td>
<td>{{ foodItem.price | currency('£') }}</td>
<td>{{ foodItem.category }}</td>
<td><a @click="removeItem(index)" class="button is-danger is-outlined">
<span>Delete</span>
<span class="icon is-small">
<i class="fas fa-times"></i>
</span>
</a>
</td>
</tr>
This is the method I use for deletion
router.delete('/', function (req, res) {
let itemToRemove = req.body;
let FoodItem = mongoose.model('FoodItem', FoodItemSchema);
FoodItem
.find(itemToRemove)
.remove(itemToRemove, err => {
if (err) return handleError(err);
})
})
After clicking the button, instead of deleting the selected item from the database, it removed all data. I wanted to delete a specific item by using the index from the v-for loop and passing it as an argument to removeItem() on click. However, it deleted everything in the database. Any ideas on where I went wrong? Thanks in advance!
Below is the code for removeItem
removeItem(itemToRemove) {
axios.delete('/api/menu', this.foodItems[itemToRemove])
.then(response => {
console.log(response);
})
.catch(err => {
console.log(err)
});
}
},