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

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

list

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

此外，如果您能负担得起第三方软件包，我建议您使用vuelidate，该软件包已经与vuetify集成在一起，因此您可以轻松地集成和应用复杂的验证（使用其内置的各种功能）验证者）。

验证表单验证规则方法范围

1 个答案: