javascript - 使用 vue JS ListView 搜索过滤器

Question

我想按标题和内容搜索。目前只能根据内容。任何建议或可以从此源代码添加。谢谢

这是我的 HTML

<div id="list">
<input type="text" v-model="search">
  <ol>
    <li v-for="(items, key) in groupedItems">
      <h3>{{ key }}</h3>
      <p v-for="todo in items">{{ todo.name }}</p>
    </li>
  </ol>
</div>

这里是 js fiddle 中的预览代码:https://jsfiddle.net/60jtkp30/9/

Answer 1

这可能不是最干净的解决方案，但根据您在 jdfiddle 中的实现，只需更改过滤器函数就足够了(我认为)。

var list = new Vue({
    el: '#list',
    data: {
    search: '',
        items: [
            { name: 'mike', type: 'student' },
            { name: 'beckham john', type: 'footballer' },
            { name: 'walcott', type: 'footballer' },
    { name: 'cech', type: 'footballer' },
    { name: 'jordan', type: 'actor' },
    { name: 'tom', type: 'actor' },
    { name: 'john', type: 'actor' }
        ]
    },
computed: {
    groupedItems() {
    const arr = {}
    //fungsi search
    var searchResult = this.items.filter( todo => {
        return todo.name.toLowerCase().indexOf(this.search.toLowerCase())>-1 || todo.type.toLowerCase().indexOf(this.search.toLowerCase())>-1;
    } )
    //grouping
    for(var i = 0; i < searchResult.length; i++) {
        const key = searchResult[i].type
        if (arr[key]) {
        arr[key].push(searchResult[i])
      } else {
        arr[key] = [searchResult[i]]
      }
    }
    return arr
  }
}
})