Migration from vue-strap
Opened this issue · 1 comments
verilog15 commented
I was using vue-strap with typeahead. We have the following code:
<typeahead v-model="searchQuery[field]"
:async="getTypeaheadURL(field)"
:placeholder="placeholder(field)"
/>
...
getTypeaheadURL: function(param) {
return '/' + this.collection + '/params/' + param + '?' + param + '=';
},
I can't seem to understand how do I convert this piece of code to use vue-boostrap-typeahead. What should be data
?
BozoJim commented
@verilog15
per the docs, the minimum requirement is something like:
<vue-bootstrap-typeahead
v-model="query"
:data="['Canada', 'USA', 'Mexico']"
/>
I put together a more fully fledged exampe also:
<template>
<b-card class="shadow-sm" title="Demo Param Selector">
<p class="card-text">
Param Selector:
</p>
<vue-bootstrap-typeahead
:data="typeaheadOptions"
v-model="selectedParam"
placeholder="Param Option 1, Param Option 2, etc..."
>
</vue-bootstrap-typeahead>
Selected Param:
<pre>{{'/' + this.collection + '/params/' + selectedParam + '?' + selectedParam + '='}}</pre>
</b-card>
</template>
<script>
import VueBootstrapTypeahead from 'vue-bootstrap-typeahead';
export default {
name: 'ParamSelector',
components: {
VueBootstrapTypeahead
},
data() {
return {
selectedParam: '',
typeaheadOptions: [
"param_option_1",
"param_option_2",
"param_option_3"
],
collection: 'my_collection'
}
}
}
</script>
With all of that being said, as far as I can tell, this repo is no longer being updated. It has been forked and is being actively maintained here: https://github.com/mattzollinhofer/vue-typeahead-bootstrap
You may want to consider migrating to vue-typeahead-bootstrap.