Skip to content

A thin wrapper of vuelidate library to simplify its usage with vue-class-component or vue-property-decorator.

License

Notifications You must be signed in to change notification settings

mesemus/vuelidate-property-decorators

This branch is 1 commit ahead of master.

Folders and files

NameName
Last commit message
Last commit date
Feb 26, 2022
Oct 29, 2019
Mar 7, 2019
Mar 7, 2019
Mar 7, 2019
Mar 7, 2019
Mar 7, 2019
Mar 7, 2019
Oct 29, 2019
Mar 7, 2019
Mar 7, 2019
Oct 29, 2019
Mar 7, 2019
Oct 29, 2019

Repository files navigation

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

Example

Running example is in the example directory.

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:

import {Validate} from 'vuelidate-property-decorators';
import {required} from 'vuelidate/lib/validators'

@Component({})
export default class AddressForm extends Vue {

    @Validate({required})
    firstName = '';

    @Validate({required})
    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:

import {Validations} from 'vuelidate-property-decorators';
import {required} from 'vuelidate/lib/validators'

@Component({})
export default class AddressForm extends Vue {

    firstName = '';
    lastName = '';

    @Validations()
    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:

import {Validate, Validations} from 'vuelidate-property-decorators';
import {required} from 'vuelidate/lib/validators'

@Component({})
export default class AddressForm extends Vue {

    firstName = '';
    lastName = '';

    isRequired = false;

    @Validations()
    validations() {
        if (this.isRequired) {
            return {
                firstName: {required},
                lastName: {required}
            }
        }
        return {}
    }
    
    @Validate(() => {
        if (this.isRequired) {
            return {required}
        }
        return {}
    })
    test = '';
}