列表视图搜索使用vue JS筛选器筛选

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提琴预览代码：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 
    } 
} 
})