使用 axios.put [laravel + vuejs 3] 更新模式内的数据时出现错误 422

Posted 2023-03-16

【中文标题】使用 axios.put [laravel + vuejs 3] 更新模式内的数据时出现错误 422

【英文标题】：ERROR 422 when update data inside modal with axios.put [laravel + vuejs 3]

【发布时间】：2021-12-23 02:10:51

【问题描述】：

我正在使用 Laravel + VueJS 3 构建一个小项目，

我使用axios.put 方法通过模态在表格行中更新单个用户的详细信息，但是当我单击带有axios.put 的模态内表单的提交按钮时遇到问题，即使我填写了所有数据所有输入，但它仍然说下面的错误，你们能告诉我如何解决这个问题吗？

谢谢！

错误

我的后台：

    public function updateUser(Request $req, User $user)
    
        $req->validate([
            'name'  =>  'required|string|max:255',
            'email'     =>  'required|email|unique:users,email,' . $user->id,
            'password'  =>  'same:confirmPassword|max:64',
            'roles'     =>  'required',
        ]);

        $input = $req->all();
        if (!empty($input['password'])) 
            $input['password']  =  Hash::make($input['password']);
         else 
            $input = Arr::except($input, 'password');
        
        $user->update($input);
        $user->syncRoles($input['roles']);
        return $this->sendResponse($user, 'Updated!');
    

我的 JS 代码：

import axios from "axios";

let API_URL = "http://localhost:8000";

export default 
  name: "manageUsers",
  components: ,
  data() 
    return 
      users: [],
      userInfo: 
        id: 0,
        name: "",
        username: "",
        phone: "",
        email: "",
        password: "",
      ,
    ;
  ,
  methods: 
    refreshUsers() 
      axios.get(`$API_URL/api/users/allusers`).then((res) => 
        this.users = res.data.data;
      );
    ,
    getUserInfo(user) 
      axios
        .get(`$API_URL/api/users/show/` + user.id)
        .then((res) => 
          this.userInfo.id = res.data.data.id;
          this.userInfo.name = res.data.data.name;
          this.userInfo.email = res.data.data.email;
          this.userInfo.username = res.data.data.username;
          this.userInfo.phone = res.data.data.phone;
        )
        .catch((error) => 
          console.log("ERRRR:: ", error.response.data);
        );
    ,
    updateUser() 
      axios
        .put(`$API_URL/api/users/update/$this.userInfo.id`)
        .then((res) => 
          this.refreshUsers();
          alert(res.data);
        )
        .catch((error) => 
          console.log("ERRRR:: ", error.response.data);
        );
    ,
  ,
  mounted() 
    this.refreshUsers();
  ,
;

我的 VueJS 模板代码：

<template>
       <table class="table table-striped" id="datatable">
          <tbody>
            <tr v-for="(user, id) in users" :key="user.id">
              <td> user.id </td>
              <td> user.name </td>
              <td> user.email </td>
              <td> user.username </td>
              <td class="text-right">
                <button
                  class="btn btn-link btn-warning btn-icon btn-sm"
                  data-toggle="modal" data-target="#userEditModal"
                  @click="getUserInfo(user)">
                  <i class="tim-icons icon-pencil"></i>
                </button>
              </td>
            </tr>
          </tbody>
        </table>


   <!-- EDIT USER MODAL -->
  <div class="modal modal-black fade" id="userEditModal" tabindex="-1" role="dialog"
    aria-labelledby="userEditModal" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="userEditModal">
           Edit user <strong class="text-primary"> userInfo.username </strong>
          </h4>
          <button type="button" class="close"
            data-dismiss="modal" aria-hidden="true">
            <i class="tim-icons icon-simple-remove"></i>
          </button>
        </div>
        <form class="form-horizontal">
          <div class="modal-body">
            <div class="d-flex flex-row">
              <label class="col-md-3 col-form-label">Username</label>
              <div class="col-md-9">
                <div class="form-group">
                  <input type="text" class="form-control" name="username"
                    v-model="userInfo.username" />
                </div>
              </div>
            </div>
            <div class="d-flex flex-row">
              <label class="col-md-3 col-form-label">Name</label>
              <div class="col-md-9">
                <div class="form-group">
                  <input type="text" class="form-control" name="name"
                    v-model="userInfo.name" />
                </div>
              </div>
            </div>
            <div class="d-flex flex-row">
              <label class="col-md-3 col-form-label">Email</label>
              <div class="col-md-9">
                <div class="form-group">
                  <input type="email" name="email" class="form-control"
                    v-model="userInfo.email" />
                </div>
              </div>
            </div>
            <div class="d-flex flex-row">
              <label class="col-md-3 col-form-label">Roles</label>
              <div class="col-md-9">
                <div class="form-group">
                  <input type="roles" name="roles" class="form-control"
                    v-model="userInfo.roles" />
                </div>
              </div>
            </div>
          </div>
        <div class="modal-footer d-flex flex-row">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">
            Close
          </button>
          <button type="submit" class="btn btn-primary" data-dismiss="modal"
            @click="updateUser()">
            Save changes
          </button>
        </div>
       </form>
      </div>
    </div>
  </div>
  <!-- END EDIT USER MODAL -->
    </template>```

【参考方案1】：

我认为您没有将任何参数传递给您的 put 调用。 axios docs

示例：

axios.put('https://httpbin.org/put',  hello: 'world' );

当出现此类问题时，您可以随时在浏览器中检查您的网络标签。查看发送到您的服务器的数据。

【讨论】：

哦，对了，我修好了，非常感谢！！