Axios.patch Not working as PATCH but as POST method [ laravel, vue ]

Question

I'm creating a small CRUD using Vue.js and bootstrap modal and I'm having an issue with Update User.

I used axios to handle the tasks, and once I am trying tupdate user, its not work as Update User but as Create User.

My template file

 <button class="btn btn-primary" @click="modal">
    <span>Create User</span>
 </button>
 <!-- Modal -->
        <div class="modal fade" id="modal" tabindex="-1" role="dialog"  aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">

                    <!-- Modal Body -->
                    <div class="modal-body">


                        <form>
                            <div class="form-group">
                                <label for="name">Name</label>
                                <input type="text" name="name" class="form-control" v-model="input.name" v-validate.continues="'required'">

                            </div> 
                            <div class="form-group">
                                <label for="name">Email</label>
                                <input type="email" name="email" class="form-control" v-model="input.email" v-validate.continues="'required'">

                            </div> 
                            <div class="form-group">
                                <label for="name">Phone Number</label>
                                <input type="text" name="phone_number" class="form-control" v-model="input.phone_number" v-validate.continues="'required'">
                            </div>
                        </form>

                    </div>
                    <div class="modal-footer">
                        <button  type="button" class="btn btn-secondary" data-dismiss="modal">
                            Close
                        </button>
                        <button v-if="add" type="button" class="btn btn-primary"  @click.prevent="createUser">
                            Create
                        </button>
                        <button v-if="edit" type="button" class="btn btn-primary" @click.prevent="updateUser">
                            Update
                        </button>
                    </div>
                </div>
            </div>
        </div>

My Script file

   update(id) {

        this.add = false;
        this.edit = true;
        this.input = this.users[id];
        $('#modal').modal('show');
    },

    updateUser() {
        let $this = this;
        axios.patch('/api/users/' + this.input.id, {
            name: this.input.name,
            email: this.input.email,
            phone_number: this.input.phone_number,
        }).then(function (response) {
            console.log(response);
            $this.fetchUser();
            Swal.fire({
                position: 'top-end',
                type: 'success',
                title: 'User has been updated',
                showConfirmButton: false,
                timer: 1500
            })
            $('#modal').modal('hide');
        })
        this.$validator.validateAll();  
    },

I'll appreciate of all your help.

Thanks in advance..

Answer 1

public function update(Request $request, $id)
{
    $request->validate(['name' => 'required', 'email' => 'required|email', 'phone_number' => 'required',]);
    $user = UserModel::find($id);
    $user->update($request->input());
    return new UsersCollection($user);
}