如何使用 Vee validate 验证 vue-bootstrap-typeahead？答案

【问题标题】：How to validate vue-bootstrap-typeahead using Vee validate?如何使用 Vee validate 验证 vue-bootstrap-typeahead？
【发布时间】：2020-11-21 11:49:06
【问题描述】：

我目前正在使用 vue js 2.6.11、vue-bootstrap-typeahead 0.2.6 和 vee-validate 3.3.7。

这是我的带有字头的组件：

<template>
  <vue-bootstrap-typeahead
    :value="keyword"
    :data="data"
    :serializer="serializer"
    ref="inputRef"
    @hit="onSelect($event)"
    @input="onKeywordChanged($event)"
    :placeholder="placeholder"
  />
</template>

这是我对 vee validate 的意见：

<!-- ItemUnit / Satuan TODO: goota-typeahead unsupported  -->
<ValidationProvider name="Satuan" rules="required|min:1|max:25" v-slot="{ errors }" style="width:100%">
  <b-input-group>
    <my-typeahead
      v-model="selectedItemUnit"
      :data="itemUnits"
      :async-search="getItemUnits"
      :state="errors.length <=0"
    />
    <i
      v-b-tooltip
      class="icon-info field-description-icon"
      data-toggle="tooltip"
      title="Satuan produk, misalnya: cup, pcs, meter dll"
    ></i>
  </b-input-group>
  <b-form-invalid-feedback :state="errors.length <=0">{{ errors[0] }}</b-form-invalid-feedback>
</ValidationProvider>
</b-form-group>

*ValidationObserver 已经在顶部。

*右侧的所有输入都是由ValidationProvider包围的vue字体。

为什么验证不起作用？

提前致谢

【问题讨论】：

标签： vue.js validation vee-validate typehead bootstrap-vue

【解决方案1】：

您必须手动触发 validate() 函数。您可以使用相同的输入事件。

<template>
  <vue-bootstrap-typeahead
    :value="keyword"
    :data="data"
    :serializer="serializer"
    ref="inputRef"
    @hit="onSelect($event)"
    @input="onKeywordChanged($event)"
    :placeholder="placeholder"
  />
</template>

并在您的 onKeywordChanged($event) 中手动调用验证。

这里provider是ValidationProvider组件上ref属性的值/

<ValidationProvider name="Satuan" ref="provider" rules="required|min:1|max:25" v-slot="{ errors }" style="width:100%">
......
</ValidationProvider>

this.$ref.provider.validate("value")

在预输入组件中默认情况下似乎不会触发它。

【讨论】：

【解决方案2】：

您必须手动触发 validate() 函数。您可以使用相同的输入事件。

<template>
  <vue-bootstrap-typeahead
    :value="keyword"
    :data="data"
    :serializer="serializer"
    ref="inputRef"
    @hit="onSelect($event)"
    @input="onKeywordChanged($event)"
    :placeholder="placeholder"
  />
</template>

并在您的 onKeywordChanged($event) 中手动调用 validate 方法。

这里provider是ValidationProvider组件的ref属性的值。

<ValidationProvider name="Satuan" ref="provider" rules="required|min:1|max:25" v-slot="{ errors }" style="width:100%">
......
</ValidationProvider>

this.$ref.provider.validate("value")

在预输入组件中默认情况下似乎不会触发它。

【讨论】：