Hello! How can pagination be done on a Quasar framework?

Question

Can you throw off an example or show how this is done? Is it worth connecting an additional library, or does the Quasar already have such an opportunity, in addition to the visual component?

Answer 1

Just use the computed property for getting data based on pagination.

Example -

getData(){
        return  this.posts.slice((this.page-1)*this.totalPages,(this.page-1)*this.totalPages+this.totalPages)
    }

 <q-list bordered separator v-for="(post, index) in getData" :key="index">              
              <q-item clickable v-ripple>
                        <q-item-label> {{ post.title }} | {{ index }}</q-item-label>
                        <q-item-label caption> {{ post.content }}</q-item-label>
                   </q-item-section>
              </q-item>

            </q-list>

Codepen - https://codepen.io/Pratik__007/pen/PowpOeL