뷰 라우터 없이 검색 필드 뷰 j에 자동 제안을 구현하려면 어떻게 해야 합니까?

뷰 라우터 없이 검색 필드 뷰 j에 자동 제안을 구현하려면 어떻게 해야 합니까?

제 견해는 이렇습니다.

<div id="app">
    <h1>Simple typeahead example</h1>
    <input placeholder="Search US states" @input="input" v-model="typeahead" />
    <ul v-if="!selected && typeahead">
      <li v-for="state in states | filterBy typeahead" @click="select(state)">{{ state }}</li>
    </ul>
</div>

나의 가치 구성 요소는 다음과 같습니다.

new Vue({
    el: '#app',
    data: {
        selected: null,
        typeahead: null,
      states: ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
  'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
  'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
  'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
  'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
  'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
  'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
  'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
  'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming']
    },

    methods: {
        select: function(state){
        this.typeahead = state
        this.selected = state
      },

      input: function(){
        this.selected = null
      }
    }
});

데모 및 다음과 같은 전체 코드: http://jsfiddle.net/oscar11/tm8k8907/10/

위의 코드가 작동합니다.하지만 그것은 vue 라우터를 사용합니다.

vue 라우터를 사용하지 않습니다.

vue 라우터를 사용하지 않고 다른 방법이 있습니까?

사용해 보십시오.

html:

<li v-for="state in states" v-if="filterBySelect(state)" @click="select(state)">{{ state }}</li>

방법:

filterBySelect (value) {
    if (!this.typeahead || this.typeahead.length === 0) return true
    return value.toLowerCase().split(this.typeahead.toLowerCase()).length > 1
  }

언급URL : https://stackoverflow.com/questions/47846352/how-can-i-implement-auto-suggestion-on-search-field-vue-js-without-vue-router