title: Quasar QList pagination with QPagination component and laravel paginate() method
body: <p>I want to paginate a list made with the QList component</p>
  
  <p>With the laravel paginate() method I receive on the client side the following data necessary for pagination:</p>
  
  <pre><code>current_page:
  data:[]
  first_page_url:
  from:
  last_page:
  last_page_url:
  next_page_url:
  path:
  per_page:
  prev_page_url:
  to:
  total:
  </code></pre>
  
  <p>I'm getting started with Quasar framework and I want a simple QList pagination solution.</p>
  
  <p>Apparently the QPagination component will be suitable for this purpose.</p>
  
  <p>I would appreciate suggestions on how to implement a working QPagination or other simple solution.</p>
  
  <p><strong>EDITED</strong></p>
  
  <p>Some code to demonstrate what I am trying to achieve</p>
  
  <pre><code>&lt;template&gt;
    &lt;q-page class="fit row wrap justify-center items-start content-start" style="overflow: hidden;"&gt;
          &lt;div class="q-pa-md" style="width: 450px;"&gt; 
              &lt;q-list bordered separator v-for="(post, index) in posts" :key="index"&gt;              
                &lt;q-item clickable v-ripple&gt;
                    &lt;q-item-section&gt;
                          &lt;q-item-label&gt; {{ post.title }} | {{ index }}&lt;/q-item-label&gt;
                          &lt;q-item-label caption&gt; {{ post.content }}&lt;/q-item-label&gt;
                     &lt;/q-item-section&gt;
                &lt;/q-item&gt;
  
              &lt;/q-list&gt;
  
              &lt;div class="q-pa-lg flex flex-center"&gt;
                      &lt;q-pagination
                            v-model="page"
                            :min="currentPage" 
                            :max="totalPages"
                            :input="true"
                            input-class="text-orange-10"
                      &gt;
                      &lt;/q-pagination&gt;
                  &lt;/div&gt;
            &lt;/div&gt;
    &lt;/q-page&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
  
     data() {
          return {
              posts : [{
                  id: 1,
                  title: "title one",
                  content: "This is content one"
              },{
                  id:2,
                  title: "title two",
                  content: "This is content two"
              },{
                  id:3,
                  title: "title three",
                  content: "This is content three"
              }],
  
              page: 1,
              currentPage:0,
              nextPage: null,
              totalPages:5,
          }
     }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>EDITED</strong> » To better illustrate the problem to solve:</p>
  
  <pre><code>&lt;template&gt;
    &lt;q-page class="fit row wrap justify-center items-start content-start" style="overflow: hidden;"&gt;
          &lt;div class="q-pa-md" style="width: 450px;"&gt; 
              &lt;q-list bordered separator v-for="(post, index) in posts" :key="index"&gt;              
                &lt;q-item clickable v-ripple&gt;
                    &lt;q-item-section&gt;
                          &lt;q-item-label&gt; {{ post.title }} | {{ index }}&lt;/q-item-label&gt;
                          &lt;q-item-label caption&gt; {{ post.content }}&lt;/q-item-label&gt;
                     &lt;/q-item-section&gt;
                &lt;/q-item&gt;
  
              &lt;/q-list&gt;
  
              &lt;div class="q-pa-lg flex flex-center"&gt;
                      &lt;q-pagination
                            v-model="page"
                            :min="currentPage" 
                            :max="totalPages"
                            :input="true"
                            input-class="text-orange-10"
                      &gt;
                      &lt;/q-pagination&gt;
                  &lt;/div&gt;
            &lt;/div&gt;
  
  
          &lt;div class="flex justify-center" &gt;
              &lt;button v-if="prevPage" class="text-grey-darker text-sm" style="margin-right:10px;" @click="goPrevPage(prevPage)"&gt;
                  Prev. Page | Pag. {{currentPage}} of {{totalPages}}
              &lt;/button&gt;
               &lt;button  v-if="nextPage"  class="text-grey-darker text-sm" @click="goNextPage(nextPage)"&gt;
                  Next Page | Pag. {{currentPage}} of {{totalPages}}
              &lt;/button&gt;
           &lt;/div&gt;
  
  
    &lt;/q-page&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
  
     data() {
          return {
              posts : {},
  
               page: 0,
               currentPage:0,
               totalPages:null,
               totalPosts:0,
               nextPage: null,
               prevPage: null
          }
     },
  
     mounted() {
      this.getData();
     },
  
     methods:{
       getData(){
          this.$axios.get(`/listposts')
              .then((response) =&gt; {
                  if (response.data.success) {
  
                     this.posts= response.data.posts.data;
  
                     this.page = response.data.posts.currentPage;
                     this.currentPage = response.data.posts.currentPage;
                     this.totalPages = response.data.posts.last_page;
                     this.totalPosts = response.data.posts.total;
                     this.page = response.data.posts.current_page;
                     this.nextPage = response.data.posts.next_page_url;
                     this.prevPage = response.data.posts.prev_page_url;
  
                } else { }
              })
              .catch(error =&gt; { 
            });
          }
       },
  
       goNextPage(urlNextPage){
          this.$axios.get(urlNextPage)
              .then((response) =&gt; {
                  if (response.data.success) {
  
                     this.posts= response.data.posts.data;
  
                     this.page = response.data.posts.currentPage;
                     this.currentPage = response.data.posts.currentPage;
                     this.totalPages = response.data.posts.last_page;
                     this.totalPosts = response.data.posts.total;
                     this.page = response.data.posts.current_page;
                     this.nextPage = response.data.posts.next_page_url;
                     this.prevPage = response.data.posts.prev_page_url;
  
                } else { }
              })
              .catch(error =&gt; { 
            });
       }
  
       goPrevPage(urlPrevPage){
        this.$axios.get(urlPrevPage)
              .then((response) =&gt; {
                  if (response.data.success) {
  
                     this.posts= response.data.posts.data;
  
                     this.page = response.data.posts.currentPage;
                     this.currentPage = response.data.posts.currentPage;
                     this.totalPages = response.data.posts.last_page;
                     this.totalPosts = response.data.posts.total;
                     this.page = response.data.posts.current_page;
                     this.nextPage = response.data.posts.next_page_url;
                     this.prevPage = response.data.posts.prev_page_url;
  
                } else { }
              })
              .catch(error =&gt; { 
            });
       }
  
     }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>EDITED</strong> with working solution</p>
  
  <pre><code>&lt;template&gt;
    &lt;q-page class="fit row wrap justify-center items-start content-start" style="overflow: hidden;"&gt;
          &lt;div class="q-pa-md" style="width: 450px;"&gt; 
              &lt;q-list bordered separator v-for="(post, index) in posts" :key="index"&gt;              
                &lt;q-item clickable v-ripple&gt;
                    &lt;q-item-section&gt;
                          &lt;q-item-label&gt; {{ post.title }} | {{ index }}&lt;/q-item-label&gt;
                          &lt;q-item-label caption&gt; {{ post.content }}&lt;/q-item-label&gt;
                     &lt;/q-item-section&gt;
                &lt;/q-item&gt;
  
              &lt;/q-list&gt;
  
              &lt;div class="q-pa-lg flex flex-center"&gt;
                      &lt;q-pagination
                            v-model="page"
                            :min="currentPage" 
                            :max="lastPage"
                            input
                            input-class="text-orange-10"
                            @input="goAnotherPage"
                      &gt;
                      &lt;/q-pagination&gt;
                  &lt;/div&gt;
            &lt;/div&gt;
    &lt;/q-page&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
  
     data() {
          return {
              posts : {},
  
              page: 0,
              currentPage:0,
              lastPage:0        
          }
     },
  
     mounted() {
      this.getData();
     },
  
     methods:{
       getData(){
          this.$axios.get('/listposts')
              .then((response) =&gt; {
                  if (response.data.success) {
                     this.posts= response.data.posts.data;
                     this.page = response.data.posts.currentPage;
                     this.currentPage = response.data.posts.currentPage;
                     this.lastPage = response.data.posts.last_page;
                } else { }
              })
              .catch(error =&gt; { 
            });
          }
       },
  
      goAnotherPage(page) { 
        this.paginationUrl="http://my_app/api/listposts?page="+this.page;
        this.$axios.get(this.paginationUrl)
          .then((response) =&gt; {
              if (response.data.success) {
                this.posts= response.data.posts.data;
              } else { }
          })
              .catch(error =&gt; { 
       });
     }
  }
  &lt;/script&gt;
  </code></pre>