用于 v-menu 的 VeeValidate答案

【问题标题】：VeeValidate for v-menu用于 v-menu 的 VeeValidate
【发布时间】：2020-12-21 05:53:17
【问题描述】：

有什么方法可以为 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>

【问题讨论】：

标签： javascript vue.js vee-validate

【解决方案1】：

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

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

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

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

【讨论】：