Laravel+Vue3项目用axios.put在模态框更新数据报错ERROR 422怎么解决

你代码里存在3个核心问题导致验证报错：

1. updateUser 方法中的axios.put请求没有携带表单数据，后端接收不到任何提交参数，因此触发必填校验错误
2. data中的userInfo初始对象未定义roles字段，即便提交数据也会出现roles值缺失的问题
3. 提交按钮为type="submit"类型，未阻止表单默认提交行为，可能触发页面刷新导致请求异常

修复步骤 #

步骤1：修改axios.put请求，携带提交数据 #

找到JS代码里的updateUser方法，修改为：

updateUser() {
  axios
    // 第二个参数传入要提交的userInfo数据
    .put(`${API_URL}/api/users/update/${this.userInfo.id}`, this.userInfo)
    .then((res) => {
      this.refreshUsers();
      alert(res.data.message);
    })
    .catch((error) => {
      console.log("ERRRR:: ", error.response.data);
    });
}

步骤2：补全userInfo的初始字段 #

修改data里的userInfo定义，添加roles字段：

data() {
  return {
    users: [],
    userInfo: {
      id: 0,
      name: "",
      username: "",
      phone: "",
      email: "",
      password: "",
      roles: "" // 新增roles初始值
    },
  };
}

步骤3：阻止表单默认提交行为 #

修改模板里的提交按钮，添加.prevent修饰符阻止默认提交，也可以直接把按钮type改为button：

<button type="submit" class="btn btn-primary" data-dismiss="modal"
  @click.prevent="updateUser()">
  Save changes
</button>

可选补充：如果需要密码修改功能 #

你的后端验证规则里有password same:confirmPassword的校验，如需支持密码修改，需要在表单中添加confirmPassword输入框，同时在userInfo里添加对应字段绑定即可。

内容的提问来源于stack exchange，提问作者Joker Dark Knight