Typeahead с Vue.js 2.0

Всего Vue noob здесь. Просто нужен компонент типа для Vue. У Bootstrap есть один, но я понятия не имею, как интегрировать два!

И единственные варианты, которые я могу найти, либо для Vue 1.x только или ужасно задокументированы (и основное усилие для подключения компонентов Bootstrap к Vue 2.x, похоже, не включает typeahead.)

Ответ 1

Я был пользователем vue-strap, и он долгое время не поддерживается... (как vue 1, так и vue 2)

проверьте это (создано мной): https://uiv.wxsm.space/typeahead/

(Простая, но изящная реализация typeahead с Vue 2 и Bootstrap 3)

Установка:

$ npm install uiv --save

Пример использования:

<template>
  <section>
    <label for="input">States of America:</label>
    <input id="input" class="form-control" type="text" placeholder="Type to search...">
    <typeahead v-model="model" target="#input" :data="states" item-key="name"/>
  </section>
</template>
<script>
  import {Typeahead} from 'uiv'
  import states from '../../assets/data/states.json'

  export default {
    components: {Typeahead},
    data () {
      return {
        model: '',
        states: states.data
      }
    }
  }
</script>
<!-- typeahead-example.vue -->

Ответ 2

Проверьте этот компонент:

https://github.com/pespantelis/vue-typeahead

Кроме того, уже существует большая коллекция компонентов vue:

https://vuecomponents.com

Ответ 3

Попробуйте wffranco fork vue-strap. Он направлен на поддержку Vue.js 2.x.x. Я тестировал последнюю версию от master (build 2.0.0-pre.11), и она работает: https://jsfiddle.net/LukaszWiktor/kzadgqv9/

<link rel="stylesheet" href="libs/bootstrap/css/bootstrap.css">

<div id="app">
    <typeahead v-model="value" v-bind:data="options"></typeahead>
</div>

<script src="libs/vue/vue.js"></script>
<script src="libs/vue-strap/vue-strap.js"></script>
<script>
    Vue.component("typeahead", VueStrap.typeahead);

    var app = new Vue({
      el: "#app",
      data: {
        value: null,
        options: ["foo", "bar", "baz"]
      }
    })
</script>