Import and use class in vuejs component inside template

Question

I am working on a vuejs / laravel form to update user settings. After some struggle i am not at the validation handling. I'm using laravels return validation to add error messages below input fields for errors. The way it is return requires me to somehow handle how i "get" the error.

My problem is that i can't seem to find out how to import a class inside my component and use it from the template. As you can see in EditUser.vue i am trying to get the error via the imported class as v-text="errors.get('name')"

So could anyone help me with how to either change my approach to this or get what i'm working on to work properly.

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

All the variables used in template tag of single file component are, basically, prefixed with this , when interpreted by Vue. Therefore, in order to make certain variables accessible, we have to attach them to current component's instance.

Easy solution to most cases, specially, if it is locally/rarely used variable is to assign Errors class to component's data option:

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));
    }
}

I've put new keyword there, as this implementation makes sense if each component will use it's own instance of Errors class.

If the goal is to share Errors class and access error bag within application, it can be added to Vue.prototype and access via this from any component. Here is one of many articles to help create custom plugin.

Depending on the goal current implemetation is trying to achieve, there may be better options, like mixins or re-usable error/alert components, that can handle error responses.