我想删除一个项目，但它删除了整个数据库

Question

我是这样显示的

    <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>

这是我用来删除的

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);
    })
})

当我点击按钮时，它删除了整个数据库数据，而不是数据库中的选定项目。在 v-for 中我放了索引，这样每个食物都有一个索引，然后在 @click 上我放了 removeItem(index) 所以它引用了那个，但它删除了整个数据库？谁能发现我做错了什么？提前致谢！

这是removeItem

removeItem(itemToRemove) {
            axios.delete('/api/menu', this.foodItems[itemToRemove])
                .then(response => {
                    console.log(response);
                })
                .catch(err => {
                    console.log(err)
                });
        }
    },

Answer 1

一切看起来都很好。但是，您需要使用 :key 绑定，以便在呈现列表时尊重 index：

<tr v-for="(foodItem, index) in filteredFoodItems" :key="index">

此外，您有 link 标签，应该阻止在其上使用点击处理程序，这是默认设置：

@click.prevent="removeItem(index)"

Answer 2

在您的路由器代码中，您依靠响应主体来确定要删除的内容。然而，在您的 axios 代码中，您没有加载响应主体，您只提供了一个数组元素。所以...

改变

axios.delete('/api/menu', this.foodItems[itemToRemove])

至

axios.delete('/api/menu', {data:this.foodItems[itemToRemove]})

这个简单的改变应该适合你。

我想删除一个项目，但它删除了整个数据库

I wanted to delete one item, but instead its deleting the whole database

javascript

mongoose

vue.js

mongoose-schema