Vuetify Form Validation Rule Method Scope

Question

Is there any way I can access the component's scope from inside a form validation method? (this.min, this.max)

I have some complex validations that depend on other component data. Is accessing data from inside the rules' methods the correct way to do this? If not, can someone please recommend a better way? Thanks!

<template>
    <v-form ref="form" v-model="valid">
        <v-text-field
            v-model="age"
            :rules="[myRules.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,
            myRules: {
                age: (value) => {
                    return this.min < value < this.max
                }
            }
        }  
    },
    methods:{
        clear() {
            this.$refs.form.reset()
        }
    }
</script>

waleed ali waleed ali · Accepted Answer · 2019-03-13T16:07:38

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).

Vuetify Form Validation Rule Method Scope

1 Answers