表分頁與VueJS

Question

我想爲我的表進行分頁，但是當我運行時，我的數據不會出現任何內容。我很困惑我的代碼是錯的，也許這裏有人可以幫助我。

var newVue = new Vue({ 
 

 
\t el: '#app', 
 

 
\t data: { 
 
\t \t items: [ 
 
\t \t \t { name: "item #1" }, { name: "item #2" }, { name: "item #3" }, { name: "item #4" }, 
 
\t \t \t { name: "item #5" }, { name: "item #6" }, { name: "item #7" }, { name: "item #8" }, 
 
\t \t \t { name: "item #9" }, { name: "item #10" }, { name: "item #11" }, { name: "item #12" } 
 
\t \t ], 
 
\t \t 
 
\t \t start: 0, 
 
\t \t limit: 2, 
 
\t \t pagination: null, 
 
\t \t total: 12 
 
\t }, 
 
\t 
 
    computed: { 
 
    \t filtered: function(){ 
 
    \t \t return this.items.slice(0, this.limit) 
 
    \t } 
 
    }, 
 
    
 
\t mounted: function() { 
 
\t \t this.limit = parseInt(this.pagination); 
 
\t }, 
 

 
\t watch: { 
 
\t \t pagination: function() { 
 
\t \t \t this.limit = parseInt(this.pagination); 
 

 
\t \t \t if(this.limit != this.start && this.start > 0) 
 
\t \t \t \t this.start = parseInt(this.pagination); 
 
\t \t \t \t this.limit = this.start + parseInt(this.pagination); 
 
\t \t } 
 
\t }, 
 

 
\t methods: { 
 
\t \t paginate: function(direction) { 
 
\t \t \t if(direction === 'next') { 
 
\t \t \t \t this.start += parseInt(this.pagination); 
 
\t \t \t \t this.limit += parseInt(this.pagination); 
 
\t \t \t } 
 
\t \t \t else if(direction === 'back') { 
 
\t \t \t \t this.limit -= parseInt(this.pagination); 
 
\t \t \t \t this.start -= parseInt(this.pagination); 
 
\t \t \t } 
 
\t \t }, 
 
\t }, 
 

 
\t filters: { 
 
\t \t paginate: function(array, start, limit) { 
 
\t \t \t return array.slice(start, limit); 
 
\t \t } 
 
\t } 
 

 
});

.pager button { 
 
    background: #fff; 
 
    border: 1px solid #ddd; 
 
    border-radius: 15px; 
 
    color: #337AB7; 
 
    padding: 7px 13px; 
 
    text-align: center; 
 
} 
 

 
.pager button:hover { 
 
    background: #eee; 
 
    cursor: pointer; 
 
    outline: none; 
 
} 
 

 
.pager button:disabled { 
 
    background: #eee; 
 
    color: #bbb; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div id="app"> 
 
\t \t <table class="table table-striped table-advance table-table-hover table-bordered"> 
 
\t \t \t <thead> 
 
\t \t \t \t <th>Item</th> 
 
\t \t \t </thead> 
 
\t \t \t <tbody> 
 
\t \t \t \t <tr v-for="item in filtered | paginate"> 
 
\t \t \t \t \t <td>{{ item.name }}</td> 
 
\t \t \t \t </tr> 
 
\t \t \t </tbody> 
 
\t \t </table> 
 

 
\t \t <div class="row"> 
 
\t \t \t <div class="col-md-12 center"> 
 
\t \t \t \t <ul class="pager"> 
 
\t \t \t \t \t <li> 
 
\t \t \t \t \t \t <button @click="paginate('previous')" :disabled="start <= 0"> 
 
\t \t \t \t \t \t \t Previous 
 
\t \t \t \t \t \t </button> 
 
\t \t \t \t \t </li> 
 
\t \t \t \t \t <li> 
 
\t \t \t \t \t \t <button @click="paginate('next')" :disabled="limit >= total"> 
 
\t \t \t \t \t \t \t Next 
 
\t \t \t \t \t \t </button> 
 
\t \t \t \t \t </li> 
 
\t \t \t \t </ul> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t <script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>

Answer 1

有你的代碼幾個問題，你的代碼工作消除這些後如能在這裏fiiddle可以看出。

1. 你不需要| paginate與v-for爲filtered計算性能，這將給你分頁的結果

   <tbody> 
        <tr v-for="item in filtered | paginate"> 
         <td>{{ item.name }}</td> 
        </tr> 
       </tbody> 
   

2. 在filtered

   你需要通過正確的PARAMS在切片方法。

   computed: { 
       filtered: function(){ 
        return this.items.slice(this.start, this.limit) 
       } 
   },`