Импорт и использование класса в компоненте vuejs внутри шаблона

Question

Я работаю над формой 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>

EditUser.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>

error.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 отдельного файлового компонента, в основном имеют префикс this при интерпретации Vue.Поэтому, чтобы сделать определенные переменные доступными, мы должны прикрепить их к экземпляру текущего компонента.

Простое решение для большинства случаев, особенно, если это локально / редко используемая переменная, это присвоить класс 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 из любого компонента. Здесь - одна из многих статей, помогающих создать пользовательский плагин.

В зависимости от цели, которую пытается реализовать текущая реализация, могут быть лучшие варианты, например mixins илиповторно используемые компоненты ошибок / предупреждений, которые могут обрабатывать ответы об ошибках.