如何使用 Vue.axios.delete() 删除数据答案

【问题标题】：How to delete data using Vue.axios.delete()如何使用 Vue.axios.delete() 删除数据
【发布时间】：2019-11-30 02:06:00
【问题描述】：

我是 vuejs 的新手。我无法使用 axios.delete() 从 fakeserve 删除 json 数据。

我试过这样做：-

axios.delete('http://localhost:3000/users/', {params: {id:  this.idToDelete} })
  .then((response) => {
    console.log(response)
  }, (error) => {
    console.log(error)
  })

这是我的 html:-

<v-text-field v-model="idToDelete" type="number" hide-details outline 
label="Enter Id to delete"></v-text-field>
<v-btn @click="userIdtoDelete()" color="error">Delete</v-btn>

这是我的 javascript (src/views/pages/Delete.vue)：

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

export default {
data () {
    return {
        idToDelete: ''
    }
},
methods: {
    userIdtoDelete () {

    axios.delete('http://localhost:3000/users/', {params: {id:  this.idToDelete} })
        .then((response) => {
            console.log(response)
            //alert('response = ' + response)
        }, (error) => {
            console.log(error)
            //alert('error = ' + error)
        })
     }
   }
}

我的代码在https://github.com/boidurja/users.git

而 fakeserver 在https://github.com/boidurja/fakeserver.git

当我单击删除按钮时，数据没有被删除，我收到以下错误消息：-

删除http://localhost:3000/users/?id=3 404（未找到）

【问题讨论】：

这似乎更多是您的服务器端代码的问题。你能不调试一下为什么会收到 404 响应吗？

标签： vuejs2 axios json-server

【解决方案1】：

JSON Server 在RESTful format 中自动创建routes，例如

GET    /users
GET    /users/1
POST   /users
PUT    /users/1
PATCH  /users/1
DELETE /users/1

因此，考虑到这一点，您应该使用

axios.delete(`http://localhost:3000/users/${encodeURIComponent(this.idToDelete)}`)
    .then(res => { console.log(res) })
    .catch(err => { console.error(err) })

【讨论】：

我尝试删除 id = 3。但它正在删除 ids 2、3 和 4。我们可以做些什么来修复它。谢谢
@BoidurjaTalukdar 在我本地测试时不会发生。检查浏览器的 Network 控制台。正在发送什么DELETE 请求？他们是否在请求中附加了正确的 ID
你好@Phil 这些是我的网络控制台的屏幕截图：ibb.co/6y0DVBj 和 ibb.co/GPmG6VH。似乎他们在请求中附加了正确的 ID。
一切看起来都不错。您究竟如何验证它删除了错误的记录？你确定你的用户记录都有唯一的ID吗？
我可以在假服务器localhost:3000/users 中看到它正在删除错误的记录。用户记录都有唯一的 ID。

【解决方案2】：

我认为您的问题是您正在调用与() 内联的函数，vue 会为您执行此操作，试试

<v-btn @click="userIdtoDelete" color="error">Delete</v-btn>

我认为您触发了该功能两次。

另外，你可以试试在userIdtoDelete($event.target.value)这样的函数中，不要直接用v-model来捕捉id

【讨论】：

正如我写的那样，你给函数赋值，去掉 v-model，然后在你的 userIdtoDelete 函数中使用它作为 userIdtoDelete (id){...}
您可以直接绑定到方法名称或调用它内联。没什么区别 - vuejs.org/v2/guide/events.html#Methods-in-Inline-Handlers
@Michael 我试过这样： userIdtoDelete (id){ Vue.axios.delete('localhost:3000/users' + id) } 但它正在删除具有不同 id 的多条记录。
注释掉你的函数的所有内容，控制台记录函数接收到的内容，我们可以从那里继续。
注释掉函数之外的所有内容。