Affichage liste Filtre de recherche avec vue JS

Question

Je souhaite effectuer une recherche par en-tête et par contenu. pour l'instant ne peut être basé sur le contenu. des suggestions ou peuvent ajouter à partir de ce code source. Merci

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

est le code de prévisualisation ici violon js: https://jsfiddle.net/60jtkp30/9/

Answer 1

Il ne peut pas être la solution la plus propre, mais en fonction de votre mise en œuvre dans le jdfiddle, juste changer le fonction de filtre serait assez (je pense).

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