Vue+Laravel中自定义Errors类方法无法调用问题求助

核心问题定位 #

报错TypeError: _this3.errors.get is not a function的本质是：你在Vue组件中调用get方法的this.errors并非Errors类的实例，而是类本身或者未正确初始化的对象。

分步修复方案 #

1. 确保Errors类的正确导出 #

先检查你的error.js，保证类的导出方式正确，示例如下：

// error.js
class Errors {
  constructor() {
    this.errors = {};
  }

  // 实例方法：获取指定字段的第一个错误
  get(field) {
    return this.errors[field] ? this.errors[field][0] : null;
  }

  // 实例方法：记录后端返回的错误集合
  record(errors) {
    this.errors = errors;
  }

  // 实例方法：清空指定字段或所有错误
  clear(field) {
    if (field) {
      delete this.errors[field];
      return;
    }
    this.errors = {};
  }
}

// 使用默认导出，方便导入
export default Errors;

2. 在Vue组件中正确实例化Errors #

在组件的data选项中，必须创建Errors类的实例，而非直接赋值类本身：

// 表单组件代码
import Errors from './error.js';

export default {
  data() {
    return {
      // 关键：创建Errors实例，而非直接写Errors
      errors: new Errors(),
      form: {
        linkedin: ''
        // 其他表单字段
      }
    };
  },
  methods: {
    async submitForm() {
      try {
        const response = await axios.post('/your-form-endpoint', this.form);
        // 表单提交成功逻辑
      } catch (error) {
        // 将Laravel返回的错误集合传入Errors实例
        this.errors.record(error.response.data.errors);
        // 此时调用get方法就不会报错
        const linkedinError = this.errors.get('linkedin');
        console.log(linkedinError);
      }
    }
  }
};

3. 实现组件外的复用（代码重构） #

如果要让Errors类在组件外独立工作，可创建全局单例实例：

// errors-singleton.js
import Errors from './error.js';

// 创建唯一实例并导出
export default new Errors();

之后在任意组件或模块中直接导入使用：

// 任意组件/模块
import errors from './errors-singleton.js';

// 记录错误
errors.record(backendErrors);
// 获取指定字段错误
const emailError = errors.get('email');
// 清空所有错误
errors.clear();

4. 验证Laravel后端错误格式 #

确保Laravel返回的错误是标准结构，示例：

{
  "errors": {
    "linkedin": ["The linkedin field must be a valid URL."]
  }
}

这样Errors类的record和get方法才能正确解析错误信息。

快速排查技巧 #

• 调用方法前打印console.log(this.errors)，如果输出是class Errors而非Errors {}，说明你没有实例化类，需改为new Errors()
• 检查Errors类中的get方法是否为实例方法（不要加static关键字），静态方法属于类本身，实例无法调用

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