title: How to paginate with Vuetify and Laravel?
body: <p>Goodnight</p>
  
  <p>I'm trying to do server side paging with Vuetify and Laravel.</p>
  
  <p>But the methods provided by Vuetify have not worked for me to do it correctly. I have a completed page that I want to implement with the Vuetify components.</p>
  
  <p>I attach my code made with simple bootstrap.</p>
  
  <pre><code>  &lt;ul class="pagination"&gt;
        &lt;li class="page-item" v-if="pagination.current_page &gt; 1"&gt;
            &lt;v-btn flat icon color="red lighten-2"&gt;
              &lt;v-icon  @click.prevent="changePage(pagination.current_page - 1, search)"&gt;thumb_down&lt;/v-icon&gt;
            &lt;/v-btn&gt;
        &lt;/li&gt;
        &lt;li class="page-item" v-for="page in pagesNumber" :key="page" :class="[page == isActived ? 'active' : '']"&gt;
              &lt;v-btn fab dark color="indigo" @click.prevent="changePage(page, search)" v-text="page"&gt;
              &lt;/v-btn&gt;
        &lt;/li&gt;
        &lt;li class="page-item" v-if="pagination.current_page &lt; pagination.last_page"&gt;             
            &lt;v-btn flat icon color="red lighten-2"&gt;
              &lt;v-icon  @click.prevent="changePage(pagination.current_page + 1, search)"&gt;thumb_down&lt;/v-icon&gt;
            &lt;/v-btn&gt;
        &lt;/li&gt;
    &lt;/ul&gt;  
  </code></pre>
  
  <p>Method of page to server:</p>
  
  <pre><code>    methods:{
              get(page, search){
                let url = `http://127.0.0.1:8000/api/articles?page=${page}&amp;search=${search}`;
                axios.get(url)
                    .then( response =&gt; {
  
                    let res = response.data
                    this.products = res.articles.data; 
                    this.pagination = res.pagination;
                  })
                  .catch(function (error) {
                    console.log(error);
                  })
              },
              changePage(page, search){
                  this.pagination.current_page = page;
                  this.get(page, search);
            },
   },
  </code></pre>
  
  <p>The previous code works correctly but without actually using the paging of the Vuetify component.</p>
  
  <p>Using the Vuetify component for paging I only show the lentgh of the pagination but in no way I manage to pass between the pages provided by the server.</p>
  
  <pre><code>      &lt;v-pagination
          v-model="pagination.current_page"
          :length="pagination.total"
          prev-icon="mdi-menu-left"
          next-icon="mdi-menu-right"
          @input="next"
        &gt;&lt;/v-pagination&gt;
  </code></pre>
  
  <p>Looking for information indicate that using <strong>@input="next"</strong> I can call a method to go to the next page <strong>but what can I use to return?</strong></p>
  
  <p>How can I click on any page number and ask for the page to the server as in my code made with bootstrap?</p>
  
  <p>I wish I could help and I thank you.</p>