A component that displays validation errors, built for Vuelidate
npm install vuelidate-caption
import VuelidateCaption from 'vuelidate-caption'
export default {
components: {
VuelidateCaption
}
}
<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.
Prop | Description | Default |
---|---|---|
model |
The corresponding Vuelidate Model, which contains $error , $invalid , $dirty properties |
Empty object (() => {} ) |
validationMessages |
An object that contains the validation messages (eg. { validation-name: 'Validation message'} ) |
Empty object (() => {} ) |
textClass |
String to be applied to the rendered component's class attribute |
Empty String ('' ) |