时间戳

首页 > 解决方案 > 用于 v-menu 的 VeeValidate

javascript - 用于 v-menu 的 VeeValidate

问题描述

有什么方法可以为 vuetify 的 v-menu 应用 veevalidate 吗？

我正在使用验证提供者容器。我已经在其他 html 输入及其工作上尝试过这个，但不是在v-menu. 我找不到任何资源来解决这个问题。有谁遇到过同样的问题？

<ValidationObserver v-slot="{ handleSubmit }">
    <form @submit.prevent="handleSubmit(_submit)">
        <validation-provider rules="required" v-slot="{ errors }">
            <v-menu width="300" max-height="400">
            <template v-slot:activator="{ on, attrs }">
                <b-input-group v-on="on" v-bind="attrs" class="mr-sm-2 mb-sm-0">
                    <b-input-group-prepend>
                        <span class="input-group-text" id="basic-addon1">
                            <i class="i-Music-Note-2 text-18"></i>
                        </span>
                    </b-input-group-prepend>
                    <b-form-select id="inline-form-input-username"></b-form-select>
                    <span class="text-red">{{errors[0]}}</span>
                </b-input-group>
            </template> 
            <template v-for="items in item_list">
                <p>{{item.name}}</p>
            </template>
        </v-menu>
        </validation-provider>
    </form>
</ValidationObserver>

标签： javascriptvue.jsvee-validate

解决方案

根据文档，ValidationProvider查找第一个v-model或value出现并在重新渲染之间观察它们以验证它们。

如果您v-menu不使用v-model或不包含使用的节点，则 vee-validate 将无法获取任何内容。

您可以使用该方法自行处理验证，validate您可以在任何您想要的事件上调用该方法，前提是它们在该事件中发出输入值。

<validation-provider rules="required" v-slot="{ errors, validate }">
  <someNode @input="validate" />
</validation-provider>

推荐阅读