[Vuejs]-Can't get error handing in vue.js 1.0 and Laravel 5.1 to work

by

0👍

✅

I had the same issue, and instead of using the out of the box errors from spark, I defined my own component:

<template>
    <div v-if="errors">
        <div class="alert alert-danger" v-if="formattedErrors.length > 0">
            <strong>Whoops!</strong> There were some problems with your input.<br><br>
            <ul>
                <li v-for="error in formattedErrors">
                    {{ error }}
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['errors'],
        computed: {
            formattedErrors() {
                return this.format(this.errors);
            }
        },
        methods: {
            format(errors) {
                if (typeof errors === 'undefined') {
                    return [];
                }
                if (typeof errors === 'object') {
                    return _.flatten(_.toArray(errors));
                }
            }
        }
    }
</script>

Then you bind in your html:

<form-errors :errors="registerForm.errors"></form-errors>

It makes sense because your component just need the to now about errors, and nothing else about the registerForm.

Hope this helps.

Leave a comment