Vue.jsでフィルタリングされた数を参照する
この記事は Vue.js Advent Calendar 2014 - Qiita の初日である。
最近、Vue.jsをちょっとだけ触ってるので、勢いで空いてた1日目に凸した。 大したことは書けないけど、初日から何もないのも盛り上がりに欠けるので書くぞ!1
Vue.jsのbuilt-inフィルター
Vue.jsにはbuit-inのフィルターが用意してあって、結構便利だ。
filterBy
はv-repeat
と一緒に使い、配列を条件でフィルタリングしたものをv-repeat
に表示させる。
orderBy
はその名の通り、v-repeat
の表示順をソートするものだ。
今回はfilterBy
を使う上で、もしかして困るんじゃないかなーと思ったことを書く。
フィルタリングされた数を参照
よくよく考えると当たり前の話なんだけど、v-repeat
の中では$index
でインデックスを参照できるし、配列に入っているオブジェクトも参照できる。
けど、フィルタリングされた配列の数、つまり表示上の結果の数を取りたい場合にどうすればいいのか分からなかった。
filterBy
の実装を読んでみるとArray.filter
を使っていたので、フィルタリングされた新しい配列の数を一時的に保持すればいいということになる。
そこで、カスタムフィルタを作って対応した。
CoffeeScritptで書いてる。
Vue.filter 'setCount', (arr, key) -> @[key] = arr.length arr
<input v-model="searchText"> <div>{{num}}</div> <ul> <li v-repeat="users | filterBy searchText | setCount num">{{name}}</li> </ul>
保持する内容を配列に変えれば、フィルタリングされた配列も参照できるし、色々やれそうで便利。
まとめ
書いてみれば、何のことはないだけど、日本語だと基本的な情報というか、試してみた!みたいな情報が多くて、APIドキュメントをひたすら読んで、最終的にソースの必要な部分を読んだ。 もっといい方法があれば教えてください。
Vue.js Advent Calendar 2014 - Qiitaの明日まだ空いてるぞ。