How to validate vue-bootstrap-typeahead using Vee validate?

Question

I am currently using vue js 2.6.11, vue-bootstrap-typeahead 0.2.6 and vee-validate 3.3.7.

here is my component with typehead:

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

And here is my input with 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>

*the ValidationObserver is already on the top.

*All inputs on the right side are vue typehead surrounded by ValidationProvider.

Why the validation is not working?

Thanks in advance

Answer 1

You have to manually trigger the validate() function. You can use input event for the same.

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

And in your onKeywordChanged($event) call the validate manually.

Here, provider is the value of ref attribute on ValidationProvider component/

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

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

It seems somehow it is not triggered by default in typeahead component.

Answer 2

You have to manually trigger the validate() function. You can use input event for the same.

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

And in your onKeywordChanged($event) call the validate method manually.

Here, provider is the value of ref attribute on ValidationProvider component.

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

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

It seems somehow it is not triggered by default in typeahead component.