Vue.jsでページネーションを実装してみる
こんにちは。毎日、そうめんを食べているきたけーです。
Vue.jsで色々書いていて、ページネーションを実装してみたのでメモ。
コード
HTMLがこんなかんじで
<div id="sushi-menus"> <ul> <li v-repeat="menu: displayMenus"> {{menu.name}} {{menu.price}} </li> </ul> <p><a v-on="click: showPrevious" class="{{isStartPage ? 'disabled' : ''}}">前へ</a></p> <p><a v-on="click: showNext" class="{{isEndPage ? 'disabled' : ''}}">次へ</a></p> </div>
JS(Coffee)がこんなかんじ
new Vue el: '#sushi-menus' data: page: 0 menus: [ {name: "まぐろ", price: "200"}, # ... ] displaySize: 4 computed: displayMenus: -> startIndex = @page*@displaySize @menus.slice startIndex, startIndex+@displaySize isStartPage: -> @page == 0 isEndPage: -> (@page+1)*@displaySize >= @menus.length methods: showPrevious: -> return if @isStartPage @page -= 1 showNext: -> return if @isEndPage @page += 1
試行錯誤したこと
- 最初displayMenusをdataにして、pageの変更をwatchで監視して変更があるたびにdisplayMenusを更新していたけどcomputedに移した(ビューのためにmenusの見せ方を変えるのに、dataに登録するのはおかしい。dataの変更のイベントが起きるたびにハンドラで○○するのはデータバインディングのライブラリをつかっている意味が無い)
- isStartPageとisEndPageを最初methodsに置いていたけど、こちらもデータ(page)が変更されたタイミングで更新して参照するかんじなのでcomputedに移した(methodsだと毎回毎回比較処理が走ってもったいない)