<template>
    <div v-if="validator.$error" class="text-danger fs-10">
        <small class="bold" v-for="(object, param) in validator.$params" v-if="!validator[param]">
            {{errorMessages[param]}}
            <span v-if="object.type === 'minLength'">{{object.min}} characters</span>
            <span v-if="object.type === 'sameAs'">{{object.eq}} field</span>
            <span v-if="object.type === 'minValue'">{{object.min}}</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',
                    minValue: 'this field must at least be',
                    sameAs: 'this field must match the',
                    numeric: 'this field can only contain numbers'
                },
            }
        },
        methods: {

        }
    }
</script>
