Initial selected value about vue-bootstrap-typeahead

[stefandunn]

I managed to come up with a work-around by setting the ref attribute on the component and then using this.$refs.refName.inputValue = 'Some value'.

<vue-bootstrap-typeahead 
    v-model="town"
    :data="towns"
    :inputClass="'large-input'"
    placeholder="Enter your town or city"
    ref="townTypeahead"
/>

Then in the mounted() lifecycle, use:

this.$refs.townTypeahead.inputValue = 'London'

[jonbartlam]

Would love to know if this is actually something we've both misunderstood. Great component but this feels like a basic feature that should work? I've just had exactly the same issue - despite setting v-model to the text I wanted displayed, it simply wouldn't show the value. I've found a work around by looking at the sourcecode but I'll add a warning:

Those of a weak disposition, look away now. Those easily offended should also look away.

My component setup is like this:

Component/HTML
<vue-bootstrap-typeahead ref="typeahead" :data="addresses" v-model="addressSearch" :serializer="s => locationText(s)" @hit="locationSelected" />

Where you want to set the initial selection
this.$refs.typeahead.$data.inputValue = this.locationText(val)

LocationText() is just a method I'm using to format the text as I want it - nothing special

Now that's out of the way - here's my use case incase I misunderstood you:

• User clicks a record from a table and a record is retreived from the database. Part of the record contains an id to a location object and the location object itself (basically, a region and postcode/zip code).
• Form is loaded with record and the location object's text representation is shown (concatenated text) inside the typeahead.
• User clicks in field to edit and when typing it will suggest records.
• On select, the id of the record selected is put into the location id field.

But obviously, when binding the initial location object, nothing was coming up. I found the only way to do it was reaching inside the typeahead component and setting the value it uses internally. I'm not sure what effect this will have on other aspects, but it works for me. I'm using NUXT FWIW

[joelhickok]

I managed to come up with a work-around by setting the ref attribute on the component and then using this.$refs.refName.inputValue = 'Some value'.

<vue-bootstrap-typeahead 
    v-model="town"
    :data="towns"
    :inputClass="'large-input'"
    placeholder="Enter your town or city"
    ref="townTypeahead"
/>

Then in the mounted() lifecycle, use:

this.$refs.townTypeahead.inputValue = 'London'

This is great, but we shouldn't have to be doing this. v-model should just work on this component... so there is a bug in there somewhere, although I just started using this and didn't look at the code.

[natha9404]

I managed to come up with a work-around by setting the ref attribute on the component and then using this.$refs.refName.inputValue = 'Some value'.

<vue-bootstrap-typeahead 
    v-model="town"
    :data="towns"
    :inputClass="'large-input'"
    placeholder="Enter your town or city"
    ref="townTypeahead"
/>

Then in the mounted() lifecycle, use:

this.$refs.townTypeahead.inputValue = 'London'

This doesn't working for me :/, some idea?

[mattzollinhofer]

I believe that I've 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 and let me know if this is still an issue!

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

I hope this helps!

[jonbartlam]

@stefandunn Much neater fix. I hadn't thought about just omitting the $data (I'm still picking vue up). Cheers.

I also note that there is a branch of this project with this issue updated but it hasn't been merged.

[StrongLucky]

I believe that I've 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 and let me know if this is still an issue!

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

I hope this helps!

Thank you. This is working!

[juanca2626]

Creo que he fusionado una solución para esto en mi fork ( https://github.com/mattzollinhofer/vue-typeahead-bootstrap ) de este proyecto que mantengo activamente. Pruébalo y avísame si esto sigue siendo un problema.

Puede encontrarlo en npm aquí: https://www.npmjs.com/package/vue-typeahead-bootstrap .

¡Espero que esto ayude!

Perfecto funciona !!!

[bogdancarmanus]

That's exactly the case. Thanks for coming up with the detailed description.

[raymondmuller]

#21

[AraneaDev]

#32

[siamkreative]

@alexurquhart Is this repository no longer maintained?

[mattzollinhofer]

I just double checked this issue and it is resolved on my branch. You can now set the initial value and update it as necessary. Report any more issues here https://github.com/mattzollinhofer/vue-typeahead-bootstrap/issues

[pappascd81]

I believe that I've 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 and let me know if this is still an issue!

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

I hope this helps!

That broke the serializer. It now shows [Object object].

[mattzollinhofer]

That broke the serializer. It now shows [Object object].

@pappascd81: Interesting, it's working well on my end and others are reporting success. If you can provide a few more details as a new issue on the new repo I can try and see what's going on: https://github.com/mattzollinhofer/vue-typeahead-bootstrap/issues