如何在 VueJs 中使用 Axios Delete？答案

【问题标题】：How to use Axios Delete in VueJs?如何在 VueJs 中使用 Axios Delete？
【发布时间】：2019-06-27 02:35:54
【问题描述】：

为什么我的删除功能在 VueJS 中不起作用？我有一个表格，显示来自 NodeJS 的数据并呈现给 VueJS

<tr v-for="result in filteredPeople" :key="result.id">
          <td>{{result.Memb_ID}}</td>
          //other data

          <div class="btn">
            <button class="btn btn-success">Edit Details</button>
            <b-button class="btn btn-danger" @click="deleteData(result.Memb_ID)">Delete</b-button>
          </div>

我的删除数据如下所示。

deleteData(result, Memb_ID) {
  axios
    .delete("localhost:9000/api/delete/user/" + result.Memb_ID)
    .then(response => {
      this.result.splice(Memb_ID, 1);
      console.log(this.result);
    });
},

在我的服务器控制台上

删除 /api/delete/user/undefined 404 167 - 0.184 毫秒

这是我的后端图片

我从未发布过所有代码，但如果您愿意，我会发布。谢谢您的帮助！

编辑我添加了我的后端图像。

编辑 2 我更新了服务器镜像。

【问题讨论】：

有错误吗？你能展示一下你的后端吗？
嗨 @ßiansorÅ.Ålmerol 上面写着 DELETE /api/delete/user/undefined 404 167 - 0.184 ms。
您似乎省略了 URL 方案（即http:// / https://）。试试axios.delete('http://...

标签： node.js vue.js vuejs2

【解决方案1】：

您的deleteData 函数参数只有一个。你可以试试这个。

deleteData(memId) {
  axios
    .delete("localhost:9000/api/delete/user/" + memId)
    .then(response => {
      this.result.splice(memId, 1);
      console.log(this.result);
    });
},

【讨论】：

它获取了memberID，但它仍然不起作用。这是在控制台 DELETE localhost:9000/api/delete/user/87456 404 (Not Found)

【解决方案2】：

这是因为您通过req.params 传递您的memId，但在您的后端您使用的是req.query.memId

您可以通过以下方式进行调整：

更新您的 axios 以使用 localhost:9000/api/delete/user?Memb_ID=${Memb_ID}
或将您的后端路由更新为router.delete('/delete/user/:Memb_ID')

【讨论】：

@Vin 您是否也将查询中的req.query.Memb_ID 更改为req.params.Memb_ID？
you result.Memb_ID 在您的 axios 中未定义。记录它
您好，我按照您的建议解决了问题，我也进行了一些调整，但谢谢！