How to clear the typehead (still not working model change)

[vlapenkov]

  <vue-bootstrap-typeahead    
        ref="usersAutocomplete"     
        v-model="username"
        :data="users"
        :serializer="item => item.login"
        @hit="$event=>addUser($event)"
      />

and this.username='' still not working, but this.$refs.usersAutocomplete.inputValue = '' is working. But this is not best solution

[jhalag]

Ran into the same issue myself. PR #21 addresses this.

[mattzollinhofer]

I merged a fix for this into my fork (https://github.com/mattzollinhofer/vue-typeahead-bootstrap) of this project that I'm actively maintaining. Give it a try.

You can find it on npm here: https://www.npmjs.com/package/vue-typeahead-bootstrap.

I hope this helps!

[parzibyte]

A quick and dirty solution.
Assign a ref to the typeahead this way:

<vue-bootstrap-typeahead ref="inputAutocompletado" :serializer="serializadorAutocompletadoClientes" @input="refrescarClientesDeAutocompletadoConBusquedaActual" @hit="onClienteSeleccionado" v-model="busqueda" :data="clientesDelAutocompletado" placeholder="Busca un cliente por nombre o documento" />

Please note that the ref is inputAutocompletado . Then when you want to clear it, make this:

this.$refs.inputAutocompletado.inputValue = "";

And this way you can clear it. The explanation is:
inputAutocompletado refers to the typeahead itself. It has its own data as a component, and the prop that is binded to the real input is in the inputValue prop. If we change that prop, it is changed in the input and in the Typeahead