vue.js tips - filterBy を使って簡易フィルタリング機能を作る方法

phi phi on vue.js

filterBy メモ.

v-for を使ったリスト表示

とりあえずベースとなるリスト表示サンプルです. v-for を使ってリスト表示しています.

filterBy を使ってフィルタリングしよう

|(パイプ)で区切って filterBy "文字列" でフィルタリングできます.

<li v-for='item in items | filterBy "f"'>{{item}}</li>  

例では "f" でフィルタリングしているので foo のみが表示されているのが分かるかと思います.

v-model と連携してフィルタリング機能を実装しよう

inputv-model を指定してその値を使って filterBy するようにすれば簡易的なフィルタリング機能を実装できます.

<input v-model='query' />  
<ul>  
  <li v-for='item in items | filterBy query'>{{item}}</li>
</ul>  

AngularJS のチュートリアルとかでもよくあるやつですね.

オブジェクトも filterBy できるよ

オブジェクトの場合は filterBy "文字列" in "キー名" という形で特定の要素に対してフィルタ判定を行うことができます.