Tabelle Paginierung mit VueJS

Question

Ich möchte Seitenumbrüche für meinen Tisch machen, aber wenn ich laufe, erscheinen meine Daten nichts. Ich bin verwirrt meinen Code, der hier vielleicht falsch ist, kann mir jeder helfen.

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

Es gibt einige Probleme mit Ihrem Code, nach wie Ihr Code funktioniert entfernen können in fiiddle hier zu sehen.

1. Sie brauchen nicht | paginate mit v-for als filtered berechnet Eigenschaft, die Sie paginierte Ergebnis

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

2. in filtered Sie richtig params in Slice-Methode übergeben erforderlich geben.

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