vue.jsで簡易AND検索フォーム

filterByを使えば、ある程度は良い感じで作れるんですが、AND検索の実装にはカスタムフィルターの実装が必要だったので、メモしておきます。

demo in jsfiddle

html

<div id="app">
  <input type="text" v-model="searchQuery">
  <ul>
    <li v-for="l in filteredView">
      <h2>{{l.id}}</h2>
      <p>{{l.description}}</p>
    </li>
  </ul>
  <div v-show="filteredView.length==0">
    no result
  </div>
</div>

js

var app = new Vue ({

    el: '#app',

    data: {
        searchQuery: '',
        list: testData
    },

    computed: {

    filteredView() {
      return this.list.filter( l => {
        return this.searchQuery.toLowerCase()
          .split(/\s+/)
          .map( q => l.id.toLowerCase().indexOf(q) > -1 || l.description.toLowerCase().indexOf(q) > -1 )
          .every( result => result === true )
      })
    }
  }

})

解説

.toLowerCase()で、小文字に揃えて、
.split(/\s+/)で、検索文字列を、１つ以上の空白で区切られた配列にして、
.map( q => l.id.toLowerCase().indexOf(q) > -1 || l.description.toLowerCase().indexOf(q) > -1 )で、リストの中の検索をかけたいkeyを指定して全てチェックして、
.every( result => result === true )で、全ての検索文字列にhitしたリストだけtrueに。

終わり。

ざっとですいません。
取り急ぎメモです。