Vuetify表单验证规则方法范围

Question

有什么办法可以从表单验证方法内部访问组件的范围？（this.min，this.max）

我有一些复杂的验证，取决于其他组件数据。从规则的方法中访问数据的正确方法是这样做的吗？如果没有，请有人推荐更好的方法吗？谢谢！

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

Answer 1

是的，您可以为此使用一种方法。例如：

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

显然，在这里（在方法中）您可以访问所有数据属性，甚至可以访问执行真正复杂验证的其他方法。

另外，如果您负担得起第三方软件包，我建议使用已经与Vuetify集成的Vuelidatie，因此您可以轻松地集成和应用复杂的验证（使用其内置验证器的各种）。<<<<<<<<<<<<<<