vuelidate property decorators
This library provides a thin wrapper of
vuelidate
library to simplify its usage with vue-class-component
or vue-property-decorator
.
Installation
yarn add vuelidate-property-decorators
Usage
Set up vuelidate
library as described in (https://vuelidate.netlify.com/#sub-installation).
Then on your component:
Validating single field
To set per-field validation, use the @Validate
decorator:
; @ @ firstName = ''; @ lastName = '';
Template (pug in this case) looks the same way as in pure vuelidate
:
.form-group q-input(v-model="$v.firstName.$model") .error(v-if="!$v.firstName.required") Field is required .form-group q-input(v-model="$v.lastName.$model") .error(v-if="!$v.lastName.required") Field is required
Setting validation for all fields at once
To set the validation for all fields at once, use @Validations
decorator:
; @ firstName = ''; lastName = ''; @ validations = firstName: required lastName: required
Dynamic validations
Both the argument of @Validate(...)
and the value of @Validations()
can be a function that is called (reactively)
with this
set to the component instance.
Example:
; @ firstName = ''; lastName = ''; isRequired = false; @ { if thisisRequired return firstName: required lastName: required return {} } @ test = '';