如何使用Vee验证来验证vue-bootstrap-typeahead？

Question

我目前正在使用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字头。

为什么验证无效？

预先感谢

Answer 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")

似乎在某种程度上它不是在typeahead组件中默认触发的。

Answer 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")

似乎在某种程度上它不是在typeahead组件中默认触发的。