chrisgrim
1 week ago
173
10
Vue

Axios Patch issue when updating model

Posted 1 week ago by chrisgrim

Hi Guys, Im hoping to have a fresh pair of eyes look at this because I can't see what I am doing wrong. I am trying to update a laravel model and I can't seem to make it work. I created the form with html like so

<form method="POST" action="/create-event/{{$event->slug}}/1/organizer" class="floating-form">
            @csrf
            @method('PATCH')
                <input type="text" name="name" placeholder="name">
                <input type="text" name="slug" placeholder="slug">
                <input type="text" name="description" placeholder="description">
                <input type="text" name="imagePath" placeholder="imagePath">
                <input type="text" name="twitterHandle" placeholder="twitterHandle">
                <input type="text" name="facebookHandle" placeholder="facebookHandle">
                <input type="text" name="instagramHandle" placeholder="instagramHandle">
                <input type="text" name="website" placeholder="website">

                <button type="submit" class="create">
                    Create
                </button>
            </form>
            @include('layouts.errors')

In the action url I am using 1 for my organizer model id just to test. This form works great and updates my model. However when I try to do the same thing in Vue I am not getting any errors but it isn't updating my model either. In Vue I have

axios.patch(`${this.eventUrl}/${this.organizer.id}/organizer`, params, headers)
                .then(response => {
                    console.log(response)
                })
                .catch(errorResponse => {
                    console.log(errorResponse)
                });

the params variable is actually formdata but if I use

for (var pair of params.entries()) {
  console.log(pair[0]+ ', ' + pair[1]); 
 };

I get

id, 1
app.js:3101 name, blue rath
app.js:3101 description, xszxzsx
app.js:3101 website, zxzsx
app.js:3101 imagePath, zsxzx
app.js:3101 twitterHandle, null
app.js:3101 facebookHandle, null
app.js:3101 instagramHandle, null
app.js:3101 slug, blue-rath

So it is actually submitting the same data as my html form to the same location. I am not getting any error messages either so I don't really know what to do. Thanks

Please sign in or create an account to participate in this conversation.