「偽のページネーションとVueJS」

Question

私は偽のページネーションと呼んでいるものを実現したいと思います。

私は、大量のデータが入っているテーブルを持っています。私はAJAXでデータセット全体を取得しますが、テーブルは大きくなっています。

私の質問です：私は2ページをクリックした場合どのように私はその後、私のテーブルの最初の10個の項目を表示するためにいろいろ書いを実装することができ、11から21にアイテムを取るつもりのように...

<!-- component template --> 
<script type="text/x-template" id="grid-template"> 
    <table> 
    <thead> 
     <tr> 
     <th v-for="key in columns" 
      @click="sortBy(key)" 
      :class="{ active: sortKey == key }"> 
      {{ key | capitalize }} 
      <span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'"> 
      </span> 
     </th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr v-for="entry in filteredData"> 
     <td v-for="key in columns"> 
      {{entry[key]}} 
     </td> 
     </tr> 
    </tbody> 
    </table> 
</script> 

<!-- demo root element --> 
<div id="demo"> 
    <form id="search"> 
    Search <input name="query" v-model="searchQuery"> 
    </form> 
    <demo-grid 
    :data="gridData" 
    :columns="gridColumns" 
    :filter-key="searchQuery"> 
    </demo-grid> 
</div> 



// register the grid component 
Vue.component('demo-grid', { 
    template: '#grid-template', 
    props: { 
    data: Array, 
    columns: Array, 
    filterKey: String 
    }, 
    data: function() { 
    var sortOrders = {} 
    this.columns.forEach(function (key) { 
     sortOrders[key] = 1 
    }) 
    return { 
     sortKey: '', 
     sortOrders: sortOrders 
    } 
    }, 
    computed: { 
    filteredData: function() { 
     var sortKey = this.sortKey 
     var filterKey = this.filterKey && this.filterKey.toLowerCase() 
     var order = this.sortOrders[sortKey] || 1 
     var data = this.data 
     if (filterKey) { 
     data = data.filter(function (row) { 
      return Object.keys(row).some(function (key) { 
      return String(row[key]).toLowerCase().indexOf(filterKey) > -1 
      }) 
     }) 
     } 
     if (sortKey) { 
     data = data.slice().sort(function (a, b) { 
      a = a[sortKey] 
      b = b[sortKey] 
      return (a === b ? 0 : a > b ? 1 : -1) * order 
     }) 
     } 
     return data 
    } 
    }, 
    filters: { 
    capitalize: function (str) { 
     return str.charAt(0).toUpperCase() + str.slice(1) 
    } 
    }, 
    methods: { 
    sortBy: function (key) { 
     this.sortKey = key 
     this.sortOrders[key] = this.sortOrders[key] * -1 
    } 
    } 
}) 

// bootstrap the demo 
var demo = new Vue({ 
    el: '#demo', 
    data: { 
    searchQuery: '', 
    gridColumns: ['name', 'power'], 
    gridData: [ 
     { name: 'Chuck Norris', power: Infinity }, 
     { name: 'Bruce Lee', power: 9000 }, 
     { name: 'Jackie Chan', power: 7000 }, 
     { name: 'Jet Li', power: 8000 }, 
     { name: 'Jet Li', power: 8000 }, 
      { name: 'Jet Li', power: 8000 }, 
       { name: 'Jet Li', power: 8000 }, { name: 'Jet Li', power: 8000 }, { name: 'Jet Li', power: 8000 }, { name: 'Jet Li', power: 8000 }, { name: 'Jet Li', power: 8000 }, { name: 'Jet Li', power: 8000 }, { name: 'Jet Li', power: 8000 }, { name: 'Jet Li', power: 8000 }, { name: 'Jet Li', power: 8000 }, { name: 'Jet Li', power: 8000 }, { name: 'Jet Li', power: 8000 }, { name: 'Jet Li', power: 8000 }, { name: 'Jet Li', power: 8000 }, { name: 'Jet Li', power: 8000 }, { name: 'Jet Li', power: 8000 }, { name: 'Jet Li', power: 8000 }, { name: 'Jet Li', power: 8000 }, { name: 'Jet Li', power: 8000 }, { name: 'Jet Li', power: 8000 }, { name: 'Jet Li', power: 8000 }, { name: 'Jet Li', power: 8000 }, { name: 'Jet Li', power: 8000 }, { name: 'Jet Li', power: 8000 }, { name: 'Jet Li', power: 8000 }, { name: 'Jet Li', power: 8000 }, { name: 'Jet Li', power: 8000 }, { name: 'Jet Li', power: 8000 }, { name: 'Jet Li', power: 8000 }, { name: 'Jet Li', power: 8000 }, { name: 'Jet Li', power: 8000 }, { name: 'Jet Li', power: 8000 }, { name: 'Jet Li', power: 8000 }, { name: 'Jet Li', power: 8000 }, { name: 'Jet Li', power: 8000 }, 

    ] 
    } 
}) 

されます

https://jsfiddle.net/r89fy3vn/

は

Answer 1

私はおそらくコンポーネントに渡すためにページと呼ばれる数値プロパティを作成します（最初のページ= 0、など）ありがとう、そして

にコンポーネントのテンプレートを変更します

<tr v-for="entry in filteredData.slice(page*10, 10)"> 

確かに、ページ変数の境界などのエラーをチェックするのにはいくつかの改良がありますが、これは良いスタートになるはずです。