Vue.js 如果没有vue路由器，如何在搜索字段vue js上实现自动建议？

我的看法是：

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

上面的代码有效。但它使用vue路由器

我不想使用vue路由器

没有使用vue路由器还有其他方法吗

试试这个：

html:

---

没有一条线处理vue路由器？或者你指的是管道（|）？如果管道困扰着你，你也可以使用v-If=“checkMyLi（state）”。@Thomas Kleßen，似乎没有一行处理vue路由器。我的JSFIDLE使用vue js 1.0.8版。我尝试使用vue.js版本2.1.6，如下所示：。存在错误。如何解决错误？这似乎就是我想要的mean@user1497119，我还是很困惑。试着用jsfiddle回答这个问题

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