title: Vue.js application bug: paginating search results fails
body: <p>I am working on a small application that displays a "users" JSON in an HTML5 table. I use Bootstrap 3, Axios and Vue.js 2 for this purpose.</p>
  
  <p>The items displayed are <em>paginated</em>. Here is the code for all that:</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 app = new Vue({
    el: '#app',
    data: {
      users: [],
      loading: true,
      errored: false,
      url: "https://randomuser.me/api/?&amp;results=100&amp;inc=name,location,email,cell,picture",
      page: 1,
      perPage: 10,
      pages: [],
  
    },
    methods: {
      getUsers() {
        axios
          .get(this.url)
          .then(response =&gt; {
            this.users = response.data.results
          })
          .catch(error =&gt; {
            console.log(error)
            this.errored = true
          })
          .finally(() =&gt; this.loading = false)
      },
      setPages() {
        var numberOfPages = Math.ceil(this.users.length / this.perPage);
        for (var index = 1; index &lt;= numberOfPages; index++) {
          this.pages.push(index);
        }
      },
      paginate(users) {
        var page = this.page;
        var perPage = this.perPage;
        var from = (page * perPage) - perPage;
        var to = (page * perPage);
        return users.slice(from, to);
      }
    },
    created() {
      this.getUsers();
    },
    watch: {
      users() {
        this.setPages();
      }
    },
    computed: {
      displayedUsers() {
        return this.paginate(this.users);
      }
    },
    filters: {
      lowercase(value) {
        return value.toLowerCase();
      },
      capitalize(value) {
        return value.charAt(0).toUpperCase() + value.slice(1);
      }
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.table-container {
    margin: 10px;
  }
  
  .table-container .panel-heading {
    font-weight: bold;
  }
  
  .table-container .panel-body {
    padding: 0;
  }
  
  .table-container table {
    margin-bottom: 0;
    border: none;
  }
  
  .table-container table tr:last-child td {
    border-bottom: none;
  }
  
  .table-container table tr th {
    font-weight: bold;
  }
  
  .table-container table tr th:first-child,
  .table-container table tr td:first-child {
    border-left: none;
  }
  
  .table-container table tr th:last-child,
  .table-container table tr td:last-child {
    border-right: none;
  }
  
  .table-container table tr td {
    padding: 2px 8px !important;
    vertical-align: middle;
  }
  
  .table-container table tr td .picture {
    padding-right: 10px;
  }
  
  .table-container table tr td img {
    max-height: 30px;
    width: auto;
    border: 1px solid #c7c7c7;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  
  &lt;div id="app" class="container"&gt;
    &lt;div class="panel panel-default table-container"&gt;
      &lt;div class="panel-heading"&gt;Users&lt;/div&gt;
      &lt;div class="panel-body"&gt;
        &lt;div class="table-responsive"&gt;
          &lt;table class="table table-striped table-bordered" id="dataTable"&gt;
            &lt;thead&gt;
              &lt;tr&gt;
                &lt;th class="text-right"&gt;#&lt;/th&gt;
                &lt;th&gt;Name&lt;/th&gt;
                &lt;th&gt;Email&lt;/th&gt;
                &lt;th&gt;City&lt;/th&gt;
              &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
              &lt;tr v-for="(user, index) in displayedUsers"&gt;
                &lt;td class="text-right"&gt;{{perPage * (page - 1) + index + 1}}&lt;/td&gt;
                &lt;td&gt;
                  &lt;span class="picture"&gt;
                    &lt;img :src="user.picture.thumbnail" :alt="user.name.first + ' ' + user.name.last" class="img-circle"&gt;
                  &lt;/span&gt;
                  &lt;span&gt;{{user.name.first | capitalize}} {{user.name.last | capitalize}}&lt;/span&gt;
                &lt;/td&gt;
                &lt;td&gt;&lt;a :href="'mailto:' + user.email | lowercase"&gt;{{user.email | lowercase}}&lt;/a&gt;&lt;/td&gt;
                &lt;td&gt;{{user.location.city | capitalize}}&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/tbody&gt;
          &lt;/table&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;nav class="text-center" aria-label="Page navigation"&gt;
      &lt;ul class="pagination pagination-sm"&gt;
        &lt;li&gt;
          &lt;a href="#" @click="page = 1" aria-label="First"&gt;
            &lt;span aria-hidden="true"&gt;&amp;laquo;&lt;/span&gt;
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#" v-if="page != 1" @click="page--" aria-label="Previous"&gt;
            &lt;span aria-hidden="true"&gt;&amp;lsaquo;&lt;/span&gt;
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li v-for="pageNumber in pages.slice(page-1, page+4)" :class="{'active': page === pageNumber}"&gt;&lt;a href="#" @click="page = pageNumber"&gt;{{pageNumber}}&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#" @click="page++" v-if="page &lt; pages.length" aria-label="Next"&gt;
            &lt;span aria-hidden="true"&gt;&amp;rsaquo;&lt;/span&gt;
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#" @click="page = pages.length" aria-label="Last"&gt;
            &lt;span aria-hidden="true"&gt;&amp;raquo;&lt;/span&gt;
          &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
  &lt;/div&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/axios@0.18.0/dist/axios.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have ran into a problem after adding a search/filter functionality to he application. I have added this to the template/view:</p>
  
  <pre><code>&lt;div class="panel-heading clearfix"&gt;
    &lt;h2 class="pull-left"&gt;Users&lt;/h2&gt;
    &lt;div class="searchbox"&gt;
      &lt;input type="text" v-model="search" class="form-control" placeholder="Search..."&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and replaced <code>&lt;tr v-for="(user, index) in displayedUsers"&gt;</code> with <code>&lt;tr v-for="(user, index) in searchResults"&gt;</code>. </p>
  
  <p>Then, to <code>computed</code> section of the script the script, I added:</p>
  
  <pre><code>searchResults() {
     return this.users.filter((user) =&gt; {
      return user.name.first.match(this.search);
     });
   }
  </code></pre>
  
  <p>The search (through <em>names</em>) works, but neither the entire JSON, nor the search results are paginated. </p>
  
  <p>I have failed to make them work <em>together</em>.  The <strong>broken</strong> application can be seen <strong><a href="https://jsfiddle.net/43gL1sjx/14/" rel="nofollow noreferrer">HERE</a></strong>.</p>
  
  <p>What is missing?</p>