CODEWITHSUNDEEP
laravelvue.jsaxiosvuex
Евгений Тимченко
Евгений Тимченко

Reputation: 183

How to put in Axios request 2 params

Im try to create a simple CRUD App on Laravel with Vue.Js (Vuex also) In Laravel im create resource controller UserController Im have a problem with update method in this controller This method was accepted only PUT, PATCH HTTP Request methods location: app/Http/Controllers/Admin/UserController.php This is how it looks

public function update(Request $request, $id)
{

    return $request->all();

}

In my Vue Component im try to send 2 parameters ID and DATA But all the time in response im get a empty array This is my Vuex file location: resources/js/components/admin/store/modules/user.js This is code of Axios request: 

async updateUserInfo(ctx, id, data)
{
    return new Promise((resolve, reject) => {
        axios({
            url: '/users/' + id,
            method: 'put',
            data: data,
            headers: {'Content-Type': 'multipart/form-data'},
        })
            .then((resp) => {
                console.log(resp)
                // ctx.commit('updateUser', resp.data.user)
                resolve(resp)
            })
            .catch((error) => {
                console.log(error)
                // ctx.commit('updateErrors', error.response.data.errors);
                reject(error)
            })
    })
},

This is my Vue Component where im try call this function location: resources/js/components/admin/views/components/user/EditComponent.vue Code: 

data()
    {
        return{
            formData: {
                address: '',
                birthday: '',
                email: '',
                name: '',
                password: '',
                passwordConfirmation: '',
                phone: '',
                surname: '',
            }
        }
    },

methods:{
        ...mapActions('user', ['editUserInfo', 'updateUserInfo']),

        async onClickUpdateInfo(id)
        {
            this.updateUserInfo(id, this.formData);
        }
    },

my Submit button in form

<button @click.prevent="onClickUpdateInfo(id)" class="btn btn-success text-white">Обновить</button>[![enter image description here][1]][1]

Upvotes: 0

Views: 585

Answers (1)

michasik
michasik

Reputation: 26

You should pass context and payload to Vuex action. So I'm guessing you do not have access to form data inside your action, right?

Try this: async updateUserInfo(ctx, { id, data })

And then in the vue component: this.updateUserInfo({ id, data: this.formData });

Upvotes: 1

Related Questions