List View Search Filter using vue JS

Question

I want to search by header and content. for now can only be based on content. any suggestions or can add from this source code. Thank you

Here is my 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>

here is preview code in js fiddle: https://jsfiddle.net/60jtkp30/9/

Answer 1

It may not be the cleanest solution, but based on your implementation in the jdfiddle, just changing the filter function would be enough (I think).

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