使用QPagination组件和laravel paginate（）方法的类星体QList分页

我想对使用QList组件生成的列表进行分页

通过laravel paginate（）方法，我在客户端接收分页所需的以下数据：

current_page:
data:[]
first_page_url:
from:
last_page:
last_page_url:
next_page_url:
path:
per_page:
prev_page_url:
to:
total:

我开始使用Quasar框架，我想要一个简单的QList分页解决方案

显然，QPagination组件将适用于此目的

我希望能就如何实施有效的QPagination或其他简单解决方案提出建议

已编辑

一些代码来演示我试图实现的目标

<template>
  <q-page class="fit row wrap justify-center items-start content-start" style="overflow: hidden;">
        <div class="q-pa-md" style="width: 450px;"> 
            <q-list bordered separator v-for="(post, index) in posts" :key="index">              
              <q-item clickable v-ripple>
                  <q-item-section>
                        <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>

            <div class="q-pa-lg flex flex-center">
                    <q-pagination
                          v-model="page"
                          :min="currentPage" 
                          :max="totalPages"
                          :input="true"
                          input-class="text-orange-10"
                    >
                    </q-pagination>
                </div>
          </div>
  </q-page>
</template>

<script>
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,
        }
   }
}
</script>

{{post.title}}{{index}}
{{post.content}}
导出默认值{
数据（）{
返回{
职位：[{
id:1，
标题：“标题一”，
内容：“这是内容一”
},{
id:2，
标题：“标题二”，
内容：“这是内容二”
},{
id:3，
标题：“标题三”，
内容：“这是内容三”
}],
页码：1，
当前页面：0，
下一页：空，
总页数：5页，
}
}
}

编辑»以更好地说明要解决的问题：

<template>
  <q-page class="fit row wrap justify-center items-start content-start" style="overflow: hidden;">
        <div class="q-pa-md" style="width: 450px;"> 
            <q-list bordered separator v-for="(post, index) in posts" :key="index">              
              <q-item clickable v-ripple>
                  <q-item-section>
                        <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>

            <div class="q-pa-lg flex flex-center">
                    <q-pagination
                          v-model="page"
                          :min="currentPage" 
                          :max="totalPages"
                          :input="true"
                          input-class="text-orange-10"
                    >
                    </q-pagination>
                </div>
          </div>


        <div class="flex justify-center" >
            <button v-if="prevPage" class="text-grey-darker text-sm" style="margin-right:10px;" @click="goPrevPage(prevPage)">
                Prev. Page | Pag. {{currentPage}} of {{totalPages}}
            </button>
             <button  v-if="nextPage"  class="text-grey-darker text-sm" @click="goNextPage(nextPage)">
                Next Page | Pag. {{currentPage}} of {{totalPages}}
            </button>
         </div>


  </q-page>
</template>

<script>
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) => {
                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 => { 
          });
        }
     },

     goNextPage(urlNextPage){
        this.$axios.get(urlNextPage)
            .then((response) => {
                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 => { 
          });
     }

     goPrevPage(urlPrevPage){
      this.$axios.get(urlPrevPage)
            .then((response) => {
                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 => { 
          });
     }

   }
}
</script>

{{post.title}}{{index}}
{{post.content}}
上。第|页。{{totalPages}}中的{CurrentPages}}
下一页|第页。{{totalPages}}中的{CurrentPages}}
导出默认值{
数据（）{
返回{
职位：{}，
页码：0，
当前页面：0，
totalPages:null，
总数：0，
下一页：空，
前页：空
}
},
安装的（）{
这是getData（）；
},
方法：{
getData（）{
这是。$axios.get（`/listposts'）
。然后（（响应）=>{
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_页面；
this.totalPosts=response.data.posts.total；
this.page=response.data.posts.current_页面；
this.nextPage=response.data.posts.next\u page\u url；
this.prevPage=response.data.posts.prev_page_url；
}else{}
})
.catch（错误=>{
});
}
},
goNextPage（urlNextPage）{
此.$axios.get（urlNextPage）
。然后（（响应）=>{
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_页面；
this.totalPosts=response.data.posts.total；
this.page=response.data.posts.current_页面；
this.nextPage=response.data.posts.next\u page\u url；
this.prevPage=response.data.posts.prev_page_url；
}else{}
})
.catch（错误=>{
});
}
goPrevPage（urlPrevPage）{
此.$axios.get（第页）
。然后（（响应）=>{
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_页面；
this.totalPosts=response.data.posts.total；
this.page=response.data.posts.current_页面；
this.nextPage=response.data.posts.next\u page\u url；
this.prevPage=response.data.posts.prev_page_url；
}else{}
})
.catch（错误=>{
});
}
}
}

使用工作解决方案编辑

<template>
  <q-page class="fit row wrap justify-center items-start content-start" style="overflow: hidden;">
        <div class="q-pa-md" style="width: 450px;"> 
            <q-list bordered separator v-for="(post, index) in posts" :key="index">              
              <q-item clickable v-ripple>
                  <q-item-section>
                        <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>

            <div class="q-pa-lg flex flex-center">
                    <q-pagination
                          v-model="page"
                          :min="currentPage" 
                          :max="lastPage"
                          input
                          input-class="text-orange-10"
                          @input="goAnotherPage"
                    >
                    </q-pagination>
                </div>
          </div>
  </q-page>
</template>

<script>
export default {

   data() {
        return {
            posts : {},

            page: 0,
            currentPage:0,
            lastPage:0        
        }
   },

   mounted() {
    this.getData();
   },

   methods:{
     getData(){
        this.$axios.get('/listposts')
            .then((response) => {
                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 => { 
          });
        }
     },

    goAnotherPage(page) { 
      this.paginationUrl="http://my_app/api/listposts?page="+this.page;
      this.$axios.get(this.paginationUrl)
        .then((response) => {
            if (response.data.success) {
              this.posts= response.data.posts.data;
            } else { }
        })
            .catch(error => { 
     });
   }
}
</script>

{{post.title}}{{index}}
{{post.content}}
导出默认值{
数据（）{
返回{
职位：{}，
页码：0，
当前页面：0，
最后一页：0
}
},
安装的（）{
这是getData（）；
},
方法：{
getData（）{
这是.axios.get（“/listposts”）
。然后（（响应）=>{
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_页面；
}else{}
})
.catch（错误=>{
});
}
},
goAnotherPage（第页）{
this.paginationUrl=”http://my_app/api/listposts?page=“+本页；
this.$axios.get（this.paginationUrl）
。然后（（响应）=>{
如果（响应）
    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>