Vue.jsでフィルタリングされた数を参照する

この記事は Vue.js Advent Calendar 2014 - Qiita の初日である。

最近、Vue.jsをちょっとだけ触ってるので、勢いで空いてた1日目に凸した。大したことは書けないけど、初日から何もないのも盛り上がりに欠けるので書くぞ！１

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ドキュメントをひたすら読んで、最終的にソースの必要な部分を読んだ。もっといい方法があれば教えてください。

解せぬ日記