読者です 読者をやめる 読者になる 読者になる

映画忘備録

映画を見た感想を、ひたすらメモっていくブログです。

VueJS の v-for で filterBy された結果件数を取得する

VueJS(現在のバージョンは1.0.17)でv-forを使用してfilterByしてる場合、その結果件数を知りたい時があると思う、例えば動的にページングしたいとか検索結果がないときに「検索結果がありません」とかメッセージを表示したい場合とか。

そういうシチュエーションはそれほど珍しいものだとも思えないので「$results」とか特別な変数で簡単に取得できても良さそうなものなのだけれども、なぜかVueJSでもangularJSでもそういった特別な変数などは用意されていないので、カスタムフィルタを自作するなどして無理矢理実装するしかない。

そんななかVueJSでv-forでfilterByした結果件数を取得するスマートな方法が見つかったので、ここにメモっておく。

VueJSのfilterByを直接叩いて結果を取得

とりあえず先に回答を書いてしまうと以下のようなコードで、これはVueJSのfilterByフィルタにテンプレートからではなく、JSから直接アクセスしてfilterByした結果オブジェクトを取得している。

this.$options.filters.filterBy(v-forするオブジェクト, フィルタリング条件, 検索するプロパティ);

より具体的に書くと

<input v-model="searchText" type="text">
<ul>
  <li v-for="item in dataItems | filterBy searchText in 'name"></li>
</ul>

これと

computed: {
    filteredResults: function () {
        return this.$options.filters.filterBy(this.dataItems, this.searchText, 'name');
    }
},

これはテンプレートに書いているか、JSの方で直接呼び出してるかというだけで内容は同じものになる。

そして上記の「filteredResults」はfilterByされた結果がreturnされているため、「filteredResults.length」でv-forをfilterByした結果件数が得られる。


この手法の優れているところは

  • computedで取得できるので使いまわしがしやすい
  • 書く内容がシンプルである
  • VueJSのフィルタを直接使用しているため、バージョンが上がったりしても比較的安全そう
  • filterBy以外のフィルタに対しても応用が効きそう

というところにあるが、正常な使い方とも言い難いので、使用する際には留意していただきたい。

広告を非表示にする