时间戳

首页 > 解决方案 > 如何删除rails API和vue Js中的记录

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

问题描述

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

这是我的代码

导轨 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"

我需要帮助

标签： ruby-on-railsvuejs2rails-api

解决方案

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

代替：

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

和：

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

推荐阅读