Table 使用 VueJS 分页

Question

我想为我的 table 分页，但是当我运行时，我的数据没有显示任何内容。我很困惑我的代码是错误的也许有人可以帮助我。

var newVue = new Vue({

 el: '#app',

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

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

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

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

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

});

.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">
  <table class="table table-striped table-advance table-table-hover table-bordered">
   <thead>
    <th>Item</th>
   </thead>
   <tbody>
    <tr v-for="item in filtered | paginate">
     <td>{{ item.name }}</td>
    </tr>
   </tbody> 
  </table>

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

Answer 1

您的代码几乎没有问题，在删除这些代码后，您的代码可以在 fiiddle 中看到。

你不需要 | paginate 和 v-for 因为 filtered 是计算出来的属性这会给你分页结果

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

在 filtered 中，您需要在 slice 方法中传递正确的参数。

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

Table 使用 VueJS 分页

Table Pagination with VueJS

vuejs2