Vue中的动态最小长度和最大长度

Question

电话有一个前缀字段，电话本身有一个字段。验证必须是动态的。最小长度由公式 7-phoneprefix.length 最大长度乘以 15 - phoneprefix.length 计算。它不会动态执行，当我更改 phonePrefix 时。我尝试不返回对象，但该方法无论如何都无济于事。如果有人能帮助我，我将不胜感激。 这是我的代码：

    <template v-if="currentStep === 'phone'">
        <div class="q8-form-row-text">
            <span class="second" v-t="{path:'requirement_phone'}"></span>
        </div>
        <div class="q8-form-row q8-form-row_phone-group">

            <CustomSelectComponent
                    v-if="country"
                    @country="onPhonePrefixChange"
                    :options="countries"

                    v-model="country"
                    class="phonePrefix"
            ></CustomSelectComponent>

            <input v-model="phone" class="q8-form__input q8-form__input-phone" :placeholder="$t('phone')"
                   name="phone" required="required" pattern="[0-9٠-٩]+" :minlength="getPhoneLengthValidation('min')" type="tel"
                   :maxlength="getPhoneLengthValidation('max')" ref="phone"  @blur="$v.phone.$touch()"/>
            <span v-if="$v.phone.$error" class="q8-form__input-error" v-t="{path: 'error.phoneNumberError'}"/>

        </div>
        <div class="q8-form-row">
            <button type="submit" value="submit" class="q8-form__submit q8-form__submit__yellow q8-form__submit__yellow-gradient"
                    :class="{
                    'q8-form__submit_next': submitButtonType === 'next'
                }"
                    v-t="{path: submitButtonType}" @click="handleSubmitButtonClick()" :disabled="isSubmitButtonDisabled()"></button>
        </div>

    </template>

逻辑：

  public getPhoneLengthValidation(validationOption: 'min' | 'max'): number {
        const size = validationOption === 'max' ? 15 : 7;

        return size - this.phonePrefix.length;
    }

Vue 验证：

validations: {

    fullName: {
        required,
        minLength: minLength(2),
    },
    email: {
        required,
        email,
        minLength: minLength(this.minValue),
    },
    phone: {
        required,
        numeric,
    },
    PrivacyPolicy: {
        checked: ( (value) => value === true),
    },
},

Answer 1

请查看我的示例以了解此类实施。主要问题在于自定义装饰器

<template>
    <div>
        <div class="form-group" :class="{ 'form-group--error': $v.fullName.$error }">
            <label class="form__label">Name</label>
            <input class="form__input" v-model="fullName" @input="$v.fullName.$touch()" />
        </div>
        <span v-if="$v.fullName.nameValidator">
            {{$v.fullName | json}}}
        </span>

        <button @click="setMinLength()" >go</button>

        <span >
            {{$v | json}}}
        </span>
    </div>
</template>


<script lang="ts">
    import {Component, Prop, Vue, Watch} from 'vue-property-decorator';
import { required, email, numeric, minLength, maxLength} from 'vuelidate/lib/validators';

Component.registerHooks(['validations']);
@Component()
export default class RegistrationFormComponent extends Vue {  

    validations() {
        return {
            fullName: {
                required,
                nameValidator: this.nameValidator
            }
        }
    }



    public fullName= '';
    public minLength:number= 3;

    nameValidator(value:string){
        return   this.minLength > value.length
    }


    setMinLength(){
        this.minLength = 5;
    }

    public created() {
    }


}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
    @import '../../assets/styles/styles.scss';
</style>