vueルーターなしで検索フィールドvue jに自動提案を実装するにはどうすればよいですか？

Question

このような

マイビュー：

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/

コードこのような

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

マイVUEコンポーネント。しかし、それは私がVUEルータ

を使用したくないVUEルータ

を使用することはVUEのルーターを使用せずに他の方法はありますか？

Answer 1

これを試してみてください：

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 
    }