title: Table Pagination with VueJS
body: <p>I want to make pagination for my table but, when I run, my data does not appear anything. I am confused my code which is wrong perhaps here anyone can help me.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 &amp;&amp; this.start &gt; 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);
    }
   }
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;div id="app"&gt;
    &lt;table class="table table-striped table-advance table-table-hover table-bordered"&gt;
     &lt;thead&gt;
      &lt;th&gt;Item&lt;/th&gt;
     &lt;/thead&gt;
     &lt;tbody&gt;
      &lt;tr v-for="item in filtered | paginate"&gt;
       &lt;td&gt;{{ item.name }}&lt;/td&gt;
      &lt;/tr&gt;
     &lt;/tbody&gt; 
    &lt;/table&gt;
  
    &lt;div class="row"&gt;
     &lt;div class="col-md-12 center"&gt;
      &lt;ul class="pager"&gt;
         &lt;li&gt;
          &lt;button @click="paginate('previous')" :disabled="start &lt;= 0"&gt;
           Previous
          &lt;/button&gt;
         &lt;/li&gt;
         &lt;li&gt;
          &lt;button @click="paginate('next')" :disabled="limit &gt;= total"&gt;
           Next
          &lt;/button&gt;
         &lt;/li&gt;
      &lt;/ul&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;script src="https://unpkg.com/vue@2.1.10/dist/vue.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>