如何删除rails API和vue Js中的记录

Question

我正在尝试使用 axios 库删除 ActiveRecord 表单 rails API 和 Vue js。我可以毫无问题地获取和添加记录。我遇到的问题是删除记录

这是我的代码

rails API .....

# DELETE v1/customers/1
 def destroy
  @customer = Customer.find(params[:id])
  @customer.destroy
end

Vue Js ........

<tr v-for="customer in customers" :key="customer.id">
  <td>{{customer.first_name}}</td>
   <td>{{customer.last_name}}</td>
    <td>{{customer.email}}</td>
     <td>{{customer.id}}</td>
     <td><button @click="removecustomer(customer.id)"
     type="button" class="btn btn-outline-danger btn-sm">Delete</button></td>

 export default {
  name: 'customers',
    data (){
        return{
            customers:[]
        }
    },
    created (){
        this.getallcustomers()
    },
     methods: {
       getallcustomers () {
             let uri = 'http://localhost:3000/v1/customers';
            this.axios.get(uri).then((response) => {
               this.customers = response.data;
               console.log(this.customers);

            });
       },
        removecustomer(id){
             let uri = `http://localhost:3000/v1/customers/${customer.id}`;
             this.axios.delete(uri).then((res) => {
               this.customers = this.customers.filter(customer => customer.id !== id);



            });
        }
    }

}

所以我的removecustomer 方法会产生错误customer is not defined"

我需要帮助

Answer 1

您仅将客户 ID 作为参数 (id) 传递给 removecustomer 函数，而不是整个 customer 对象，因此，您会收到未定义的错误。

替换：

let uri = `http://localhost:3000/v1/customers/${customer.id}`

与：

let uri = `http://localhost:3000/v1/customers/` + id