Vue axios makes put request to wrong URL

Question

so I've got this weird problem where if I make a Put request through axios in Vue, it's sending it to the wrong route.

It's part of a simple CRUD through a Laravel APIresource. Get and post work fine.

This is the form:

<form @submit.prevent="editType" method="post" class="mb-4">
            <label v-if="user.gender === 'man'" for="single_male">Enkel<input type="checkbox" name="type" :id="single_male" :value="types.single_male" v-model="checkedType" @change="showSaveButton = true"></label>
            <label v-if="user.gender === 'vrouw'" for="single_female">Enkel<input type="checkbox" name="type" :id="single_female" :value="types.single_female" v-model="checkedType" @change="showSaveButton = true"></label>
            <label v-if="user.gender === 'man'" for="double_male">Dubbel mannen<input type="checkbox" name="type" :id="double_male" :value="types.double_male" v-model="checkedType" @change="showSaveButton = true"></label>
            <label v-if="user.gender === 'vrouw'" for="double_female">Dubbel vrouwen<input type="checkbox" name="type" :id="double_female" :value="types.double_female" v-model="checkedType" @change="showSaveButton = true"></label>
            <label for="double_mix">Dubbel gemengd<input type="checkbox" name="type" :id="double_mix" :value="types.double_mix" v-model="checkedType" @change="showSaveButton"></label>
            <button type="submit" v-if="showSaveButton">Opslaan</button>
        </form>

My update function:

 public function update(Request $request, $id)
    {
        $user_id = auth('api')->user()->id;

        $type = Type::where('user_id' ,'=', $user_id)->first();

        $type->single_male = $request->input('single_male');
        $type->single_female = $request->input('single_female');
        $type->double_male = $request->input('double_male');
        $type->double_female = $request->input('double_female');
        $type->double_mix = $request->input('double_mix');

        $type->save();

        return redirect()->back();
    }

my method:

editType() {
                let types = this.types;
                let data = {
                    single_male: this.single_male,
                    single_female: this.single_female,
                    double_male: this.double_male,
                    double_female: this.double_female,
                    double_mix: this.double_mix,
                };
                axios.put('/types/'+types.id, data)
                    .then(request => this.successfulEdit(request))
                    .catch(() => this.failed())
            },
            successfulEdit() {
                alert("Voorkeuren succesvol bijgewerkt!");
            }

and my route:

    Route::apiresource('types','TypeController');

When I make a put request, I can see in the Developer Tools that it tries to make the request to the current url, which of course gives a 405 method not allowed error. When I change the axios request to just ('/types', data), it does follow the specified route but of course gives the 405 error too since the put method requires an id. Hardcoding to e.g. '/types/4/' also leads to using the current url.

Am I missing somethng or what's wrong? Thanks in advance guys!

What's the value of types.id? Can you show the output of console.log('/types/'+types.id)? — User 28
Firstly, thanks for your help!types.id seems to return undefined. Console logging types does return the correct data, though it seems to pass it in an array (while in this case there is only one object). I think the problem lays there somewhere. Console logging types[0].id does return the desired id, but writing axios.put('/types/'+types[0].id, data) doesn't seem to work either. Even hardcoding the id in the url isn't working. — Yorg Vermeulen

Yorg Vermeulen Yorg Vermeulen · Accepted Answer · 2019-05-11T18:04:57

2

votes

Found the problem. The return redirect()->back(); was the culprit. Thanks y'all!

Vue axios makes put request to wrong URL

2 Answers