时间戳

首页 > 解决方案 > 如何使用 Vue.axios.delete() 删除数据

vuejs2 - 如何使用 Vue.axios.delete() 删除数据

问题描述

我是 vuejs 的新手。我无法json使用axios.delete().

我试过这样做：-

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（未找到）

标签： vuejs2axiosjson-server

解决方案

JSON 服务器自动创建RESTful 格式的路由，例如

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

推荐阅读