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

Question

我正在使用 vuejs/laravel 表单来更新用户设置。经过一番努力，我不在验证处理中。我正在使用 laravels 返回验证在错误输入字段下方添加错误消息。它返回的方式要求我以某种方式处理我如何“得到”错误。

我的问题是我似乎无法找到如何在我的组件中导入一个类并从模板中使用它。正如您在 EditUser.vue 中看到的那样，我试图通过导入的类获取错误 v-text="errors.get('name')"

那么谁能帮助我改变我的方法或让我正在做的事情正常工作。

编辑.blade.php:

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

编辑用户.vue:

<template>
  <form method="POST" action="update" @submit.prevent="onSubmit">
     <input id="name" type="text" name="name" v-model="user.name">
       <span class="invalid-feedback" role="alert">
         <strong v-text="errors.get('name')"></strong>
     </span>
  </form>
</template>

<script>
import {Errors} from '../errors.js';
export default {
    props: ['userArray', 'route'],
    data() {
        return {
            user: JSON.parse(this.userArray)
        }
    },
    methods: {
        onSubmit() {
            axios.post(this.route, this.user)
                .then(response => alert('Success'))
                .catch(error => Errors.record(error.response.data));
        }
    }
};
</script>

错误.js:

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

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

Answer 1

在单文件组件的template标签中使用的所有变量，在被Vue解释时，基本上都是以this为前缀。因此，为了使某些变量可访问，我们必须将它们附加到当前组件的实例。

大多数情况下的简单解决方案，特别是，如果它是本地/很少使用的变量，则将 Errors 类分配给组件的 data 选项:

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 类实例，则此实现是有意义的。

如果目标是共享 Errors 类并在应用程序中访问错误包，可以将其添加到 Vue.prototype 并通过 this 访问> 来自任何组件。 Here是帮助创建自定义插件的众多文章之一。

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