Vue登录表单提交报错"The "login" attribute is required"问题排查

错误原因及修复方案 #

报错说明后端没有接收到你提交的login字段，按以下步骤排查即可：

1 先确认前端是否正确传递参数

打开浏览器F12调试工具，切换到「网络」面板，提交表单后找到对应login接口，查看请求负载（Request Payload/Form Data）中是否存在login字段：

• 如果没有login字段，问题出在前端参数处理逻辑
• 如果有login字段，问题出在后端参数解析逻辑，检查请求头Content-Type是否匹配后端要求

2 前端问题常见修复方法

你代码中最大的问题是自定义$request实例可能存在响应式失效、调用逻辑不符合封装要求的问题：

方案A：修改为普通响应式参数对象

大部分自定义请求封装不需要提前实例化参数，直接用普通对象存储表单值即可：

<script>
export default {
  data() {
    return {
      // 改为普通对象，保证v-model响应式正常
      apiRequest: {
        login: '',
        password: '',
      },
      errorMessage: '',
      successMessage: '',
    };
  },
  methods: {
    OnLogin() {
      // post方法第二个参数传入请求体
      this.$request.post('login', this.apiRequest)
        .then((response) => {
          this.successMessage = response;
          this.errorMessage = '';
        })
        .catch((errors) => {
          this.errorMessage = errors;
          this.successMessage = '';
        });
    },
  },
};
</script>

方案B：确认原$request实例的调用规则

如果你必须用原有new this.$request()的实例写法，在提交前先打印参数确认值正常：

OnLogin() {
  // 新增调试代码确认参数存在
  console.log('login字段值：', this.apiRequest.login)
  this.apiRequest.addStore(this.$store);
  this.apiRequest.post('login')
    // 原有回调逻辑
}

如果打印出来login字段为空，说明v-model没有成功绑定到实例属性，需要给$request类的属性添加get/set支持响应式，或者直接放弃用实例存表单值。

3 后端解析问题修复

如果前端已经正确传递login字段，检查请求头Content-Type：

• 后端要求表单格式：Content-Type: application/x-www-form-urlencoded，需要把参数转为URLSearchParams格式再提交
• 后端要求JSON格式：Content-Type: application/json，确认参数是标准JSON结构

内容的提问来源于stack exchange，提问作者ChrisG29