exchange-2.0/resources/assets/vue/components/general/forms/ValidationErrorComponent.vue

<template>
    <div v-if="validator.$error" class="text-danger fs-10">
        <small class="bold" v-for="(object, param) in validator.$params">
            <span class="btn-block" v-if="object.type === 'required'">{{errorMessages[param]}}</span>
            <span class="btn-block" v-if="object.type === 'minLength'">{{errorMessages[param]}} {{object.min}} characters</span>
            <span class="btn-block" v-if="object.type === 'sameAs'">{{errorMessages[param]}} {{object.eq}} field</span>
            <span class="btn-block" v-if="object.type === 'maxValue'">{{errorMessages[param]}} {{object.max}}</span>
        </small>
    </div>
</template>

<script>
    export default {
        props: {
            validator: {
                required: true
            }
        },
        data(){
            return {
                errorMessages:{
                    required: 'this field is required',
                    email: 'enter a valid email address',
                    minLength: 'this field must have at least',
                    sameAs: 'this field must match the',
                    maxValue: 'this value must not exceeds'
                },
            }
        },
        methods: {

        }
    }
</script>