how to delete a record in rails API and vue Js

Question

i am trying to delete an ActiveRecord form rails API and Vue js using the axios library. I can fetch and add records without any issues .The issue I have is deleting a record

Here is my code

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



            });
        }
    }

}

So my removecustomer methods produce an error customer is not defined"

I need help

Answer 1

You are only passing only customer id as paramteter (id) to the removecustomer function and not the entire customer object, thus, you are getting an undefined error.

Replace:

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

With:

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