Wie kann ich automatischen Vorschlag auf Suchfeld Vue js ohne Vue-Router implementieren?

Question

Meine Ansicht wie folgt aus:

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

wie Meine vue Komponente:

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 
     } 
    } 
}); 

Demo und Voll Code wie folgt: http://jsfiddle.net/oscar11/tm8k8907/10/

Der obige Code funktioniert. Aber es vue Router

verwenden will ich nicht vue Router

Gibt es eine andere Art und Weise verwenden, ohne vue-Router?

Answer 1

Try this:

html:

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

Methode:

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