web-dev-qa-db-ja.com

Vue.js 2.0による先行入力

Total Vue noob here.Vueの先行入力コンポーネントが必要でした。Bootstrapには1つがありますが、2つを統合する方法がわかりません！

そして、私が見つけることができる唯一のオプションは、Vue 1.xのみ、またはひどく文書化されています（そして、Bootstrap components to Vue 2.xには先行入力が含まれていないようです。）

vue.jstypeaheadbootstrap-typeaheadvuejs2
14
Ian Grainger

私はvue-strapのユーザーであり、長い間メンテナンスしていません...（vue 1バージョンとvue 2フォークの両方）

これを確認してください（自分で作成）： https://uiv.wxsm.space/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 -->
3
wxsm

このコンポーネントを確認してください。

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

また、vueコンポーネントの素晴らしいコレクションが既にあります：

https://vuecomponents.com

1
codegeek

wffrancoのvue-strapのフォーク を試してください。 Vue.js 2.x.xをサポートすることを目指しています。マスター（ビルド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>
0
Lukasz Wiktor