vuelidate-caption v0.1.8

vuelidate-caption

Description

A component that displays validation errors, built for Vuelidate

Project setup

npm install vuelidate-caption

Import the component

import VuelidateCaption from 'vuelidate-caption'

export default {
    components: {
        VuelidateCaption
    }
}

Usage

<template>
    <div>
        <input type="text" v-model="$v.example.$model">
        <VuelidateCaption :model="$v.example" :validationMessages="validationMessages">
    </div>
</template>

import VuelidateCaption from 'vuelidate-caption'
import { required } from 'vuelidate/lib/validators'

export default {
    components: {
        VuelidateCaption
    },

    validations: {
        example: { required }
    },

    computed: {
        validationMessages: () => {
            required: 'Required value'
        }
    }

    data: () => {
        example: ''
    }
}

Whenever $error is triggered on the Vuelidate Model (model prop), the corresponding validation message from validationMessages will be rendered.

Props