Why am getting method not allowed error when saving the data in Laravel?

Question

In my application, I am getting the error method not allowed when trying to save the data. I am posting my codes here, please someone look into this and help me.

HolidayAdd.vue

<template>
    <layout>
        <form @submit.prevent="handleSubmit">
            <div class="input-group">
                <div class="input-group-prepend">
                    <span for="name" class="input-group-text">First Name and Last Name </span>
                </div>
                <input type="text" class="form-control" name="firstname" placeholder="Enter your First Name" v-model="holiday.fname" id="fname">
                <input type="text" class="form-control" name="lastname" placeholder="Enter your Last Name" v-model="holiday.lname" id="lname">
            </div>
            <br>
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text">Start Date </span>
                </div>
                <input type="date" class="form-control" name="startdate" v-model="holiday.sdate" id="sdate">
            </div>
            <br>
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text">End Date</span>
                </div>
                <input type="date" class="form-control" name="enddate" v-model="holiday.edate" id="edate">
            </div>
            <br>
            <button type="submit" class="btn btn-info">Apply</button>
        </form>
    </layout>
</template>

<script>
import Layout from './../../Shared/Layout'
export default {
    components: {
        Layout
    },
    data() {
        return {
            holiday: {
                fname: '',
                lname: '',
                sdate: '',
                edate: ''
            }
        }
    },
    methods: {
        async handleSubmit() {
            let response = await this.$inertia.post('/holiday/store', this.holiday)
        }
    }
}
</script>

HolidayController.php

public function store(Request $request)
    {

        $holiday = $request->validate([
            'firstname' => 'required',
            'lastname' => 'required',
            'startdate' => 'required',
            'enddate' => 'required'
        ]);

        Holiday::create($holiday);

        return redirect()->route('holiday.index')->with('success', 'Record Inserted Successfully');
    }

web.php

Route::resource('holiday', 'HolidayController');

As far as I know, there is no error, then why I am getting a 405 error here?

Answer 1

Your url '/holiday/store' dose not much Route::resource('holiday', 'HolidayController');

Fix

await this.$inertia.post('holiday', this.holiday)

To check routes and its corresponding URIs

Run the following command

php artisan route:list

Answer 2

In your Vue code your should use POST request to the '/holiday' instead of the '/holiday/store' .

Defining resource route is equivalent to:

Route::get('/holiday', 'HolidayController@index');
Route::get('/holiday/create', 'HolidayController@create');
Route::post('/holiday', 'HolidayController@store');
Route::get('/holiday/{holiday}', 'HolidayController@show');
Route::get('/holiday/{holiday}/edit', 'HolidayController@edit');
Route::put('/holiday/{holiday}', 'HolidayController@update');
Route::patch('/holiday/{holiday}', 'HolidayController@update');
Route::delete('/holiday/{holiday}', 'HolidayController@destroy');

https://laravel.com/docs/5.8/controllers#resource-controllers