时间戳

首页 > 解决方案 > 如何放入axios request 2 参数

laravel - 如何放入axios request 2 参数

问题描述

我尝试在 Laravel 上使用 Vue.Js（也包括 Vuex）创建一个简单的 CRUD 应用程序Http/Controllers/Admin/UserController.php 这是它的样子

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

    return $request->all();

}

在我的 Vue 组件中，我尝试发送 2 个参数 ID 和 DATA 但始终作为响应，我得到一个空数组这是我的 Vuex 文件位置：resources/js/components/admin/store/modules/user.js 这是代码Axios 请求：

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)
            })
    })
},

这是我的 Vue 组件，我尝试调用此函数位置：resources/js/components/admin/views/components/user/EditComponent.vue 代码：

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

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

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

表单中的我的提交按钮

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

标签： laravelvue.jsaxiosvuex

解决方案

您应该将上下文和有效负载传递给 Vuex 操作。所以我猜你无法访问你的操作中的表单数据，对吧？

尝试这个：async updateUserInfo(ctx, { id, data })

然后在 vue 组件中：this.updateUserInfo({ id, data: this.formData });

推荐阅读