alexurquhart/vue-bootstrap-typeahead

Migration from vue-strap

Opened this issue · 1 comments

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?

@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.