Vee-validate v3 访问提供者的标志

【问题标题】：Vee-validate v3 accessing flags of providersVee-validate v3 访问提供者的标志
【发布时间】：2021-07-07 11:54:28
【问题描述】：

我正在使用 Vee-Validate v3 库进行验证。如果第一个验证提供程序具有验证标志（这意味着验证一次），我想显示第二个 div

我应该如何在第二个 div 中填写 v-if？

<ValidationObserver
    v-slot="{ pristine, invalid }"
    @submit.prevent="handleSubmit"
    tag="form"
    ref="observer"
>
    <div>
        <ValidationProvider
            rules="required"
            v-slot="{ errors }"
            vid="contactmethod"
        >
            input element here
        </ValidationProvider>
    </div>
        
    <div v-if="ValidationProvider of CONCTACTMETHOD has VALIDATED flag">
        <ValidationProvider
            rules="required"
            v-slot="{ errors }"
            vid="methodone"
        >
            input element here
        </ValidationProvider>
    </div>
</ValidationObserver

【问题讨论】：

标签： vue.js vee-validate

【解决方案1】：

您可以使用之前的 ValidationProvider 的 ref 并使用值 valid 或 invalid 来做到这一点：

<ValidationObserver
    v-slot="{ pristine, invalid }"
    @submit.prevent="handleSubmit"
    tag="form"
    ref="observer">
    <div>
        <ValidationProvider
            ref="contactmethod"
            rules="required"
            v-slot="{ errors }"
            vid="contactmethod">
            input element here
        </ValidationProvider>
    </div>
        
    <div v-if="$refs.contactmethod.valid">
        <ValidationProvider
            rules="required"
            v-slot="{ errors }"
            vid="methodone">
            input element here
        </ValidationProvider>
    </div>
</ValidationObserver>

【讨论】：

感谢您的建议。 contactmethod 没有有效属性，但有 flags.valid 属性，所以我将其更改为 $refs.contactmethod.flags.validated 并且效果很好。