Vue.js 2.0을 사용한 자동 검색

Vue.js 2.0을 사용한 자동 검색

마감되었습니다. 이 질문은 충족되지 않습니다.스택 오버플로우 가이드라인현재 답변을 받고 있지 않습니다.

---

이 질문을 개선하시겠습니까?스택 오버플로의 토픽이 되도록 질문을 업데이트합니다.

4년 전에 문을 닫았어요

이 질문을 개선하다

여기 완전 Vue noob이야.Vue의 자동 검색 컴포넌트를 원했을 뿐이에요.부트스트랩에 1개가 있는데 어떻게 통합해야 할지 모르겠어요!

또한 Vue 1.x에 대해서만 또는 문서화된 옵션밖에 찾을 수 없습니다(Vue 2.x에 Bootstrap 컴포넌트를 포트하기 위한 주요 작업은 자동 검색을 포함하지 않는 것 같습니다).

vue-strap을 사용했는데 오랫동안 유지보수가 안 돼서...(vue 1 버전과 vue 2 포크 모두)

체크 아웃(자체 작성):https://uiv.wxsm.space/autoahead/

(Vue 2 및 부트스트랩 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 -->

이 컴포넌트를 확인해 주세요.

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

또한 다음과 같은 다양한 vue 구성 요소가 이미 있습니다.

https://vuecomponents.com

Wffranco's fork of 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>

언급URL : https://stackoverflow.com/questions/40266688/typeahead-with-vue-js-2-0