405 error when deleting row Laravel, Inertia+Vue.js

Question

I am working with Laravel and Inertia+Vue.js.

I am trying to delete a row but I get a 405 error method not allowed.

Here is my code in Layout.vue :

<a @click="destroy(website)">delete</a>

import AppLayout from '@/Layouts/AppLayout.vue';
import {Link} from "@inertiajs/inertia-vue3";
import {Inertia} from "@inertiajs/inertia";

export default {
    components: {
        Link, AppLayout, Inertia
    },

    props: {
        websites: Object
    },

    methods: {
        destroy(website) {
            if(confirm('are u sure?')) {
                this.$inertia.delete(`/destroy/website/${website.id}`)
            }
        }
    },

the method in my controller :

public function destroy(Website $website)
    {
       $website->delete();
       return redirect()->route('dashboard');
    }

my route in web.php :

Route::delete('/destroy/website/{id}', [WebsiteController::class, 'destroy']);

the request from the browser as it appears in the network panel is DELETE https://website.fr/destroy/website/2 (2 is the id of the website I clicked on)

any help will appreciated !

Answer 1

For this to work:

destroy(Website $website)

your route should be:

Route::delete('/destroy/website/{website}', [WebsiteController::class, 'destroy']);

not /destroy/website/{id} so Laravel can inject the model with the id passed from your front end

Answer 2

My suggested code for the routes section:

Route::delete('destroy-website/{website}', [WebsiteController::class, 'destroy']);