[Vuejs]-Vuetify Form Validation Rule Method Scope

0👍

Yes, you can use a method for that. e.g:

<template>
    <v-form ref="form" v-model="valid">
        <v-text-field
            v-model="age"
            :rules="[age]"
            label="Label"
            required
        >
        </v-text-field>
        <v-btn
            color="primary"
            :disabled="!valid"
            @click="submit"
        >
        submit
        </v-btn>
        <v-btn 
            @click="clear"
        >
        clear
        </v-btn>
    </v-form>
</template>

<script>
    data(){
        return{
            min: 21,
            max: 65,
            valid: true,
        }  
    },
    methods:{
        clear() {
            this.$refs.form.reset()
        },
        age: (value) => {
           return this.min < value < this.max
        }
    }
</script>

obviously, here (in method) you would have access to all data properties and even other methods for performing really complex validations.

Also, if you can afford a third party package, I would suggest to use vuelidate which already has integration with vuetify so would be easy for you to integrate and apply complex validations (using its variety of built-in validators).

Leave a comment