Javascript 在模板内的vuejs组件中导入和使用类

我正在编写vuejs/laravel表单以更新用户设置。经过一番挣扎后，我不在正确的处理。我正在使用laravels返回验证在错误输入字段下面添加错误消息。返回的方式要求我以某种方式处理如何“获取”错误

我的问题是，我似乎无法找到如何在我的组件中导入类并从模板中使用它。正如您在EditUser.vue中看到的，我试图通过导入的类获取错误，如

v-text=“errors.get（'name'）”

那么，有谁能帮助我改变我的方法，或者让我正在做的工作正常工作呢

edit.blade.php：

<edit-user-form user-array="{{ $user }}" 
route="{{ route('user.update', $user) }}"></edit-user-form>

---

当Vue解释时，单个文件组件的

模板

标记中使用的所有变量基本上都以

this

作为前缀。因此，为了使某些变量可以访问，我们必须将它们附加到当前组件的实例

对于大多数情况，特别是在本地/很少使用的情况下，简单的解决方案是将

错误

类分配给组件的

数据

选项：

data () {
   return {
      user: JSON.parse(this.userArray),
      errors: new Errors()
   }
},
methods: {
    onSubmit() {
        axios.post(this.route, this.user)
            .then(response => alert('Success'))
            .catch(error => this.errors.record(error.response.data));
    }
}

我在这里添加了

new

关键字，因为如果每个组件都使用自己的

Errors

类实例，那么这个实现是有意义的

如果目标是在应用程序中共享

错误

类和访问错误包，则可以将其添加到

Vue.prototype

中，并通过

此

从任何组件进行访问。是许多帮助创建自定义插件的文章之一

---

根据当前Implementation试图实现的目标，可能会有更好的选项，如可重复使用的错误/警报组件，可以处理错误响应。

the

v-text=“errors.get（'name'）”

正在寻找名为

errors

的vue数据类型。您的导入是空白导入。它没有被引用anything@Varcorb是的，我想，你会说我需要在数据返回中调用它吗？我该怎么做？在你的

返回{user:JSON.parse（this.userArray），errors:errors}

@Varcorb我以前试过，它给我这个错误“呈现中的错误：”TypeError:_vm.errors.get不是一个函数“谢谢你，这已经成功了。谢谢你提供了额外的文档和想法，告诉我如何以不同的方式处理这个问题。

export class Errors {
    constructor() {
        this.errors = {};
    }

    get(field) {
        if (this.erros[field]) {
            return this.errors[field][0];
        }
    }
    record(errors) {
        this.errors = errors;
    }
}

data () {
   return {
      user: JSON.parse(this.userArray),
      errors: new Errors()
   }
},
methods: {
    onSubmit() {
        axios.post(this.route, this.user)
            .then(response => alert('Success'))
            .catch(error => this.errors.record(error.response.data));
    }
}