Vue.jsでページネーションを実装してみる

vuejs

こんにちは。毎日、そうめんを食べているきたけーです。

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だと毎回毎回比較処理が走ってもったいない)

学んだこと

参考にしたところ