列表視圖搜索使用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 
    } 
} 
})