web-dev-qa-db-fra.com

Typeahead avec Vue.js 2.0

Total Vue noob ici. Je voulais juste un composant typeahead pour Vue. Bootstrap en a un, mais je ne sais pas comment intégrer les deux!

Et les seules options que je puisse trouver sont soit pour Vue 1.x seulement, soit pour être terriblement documentées (et l'effort principal pour porter des composants Bootstrap sur Vue 2.x ne semble pas inclure typeahead.)

vue.jstypeaheadbootstrap-typeaheadvuejs2
14
Ian Grainger

Je suis un utilisateur de Vue-strap, et ça ne se maintient pas depuis longtemps ... (version vue 1 et vue 2 fork)

vérifier ceci (créé par moi-même): https://uiv.wxsm.space/typeahead/

(Une implémentation de type simple mais élégante avec Vue 2 et Bootstrap 3)

Installer:

$ npm install uiv --save

Exemple d'utilisation:

<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 -->
3
wxsm

Découvrez ce composant:

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

En outre, il existe déjà une grande collection de composants vue:

https://vuecomponents.com

1
codegeek

Essayez la fourche de wffranco de vue-strap . Il vise à supporter Vue.js 2.x.x . J'ai testé la version récente de master (build 2.0.0-pre.11) et cela fonctionne: 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>
0
Lukasz Wiktor