Quasar QList结合QPagination与Laravel paginate()实现分页方案问询

嘿，刚接触Quasar的话，用QPagination搭配Laravel的paginate确实是最顺的方案，我之前做项目时刚好这么实现过，给你一步步拆解下～

Laravel的paginate()返回的结构（current_page/data/last_page等）刚好和Quasar的QPagination组件所需参数完全匹配，不需要额外转换格式，直接对接就能实现分页功能。

• 初始化分页状态：在组件中定义对应Laravel返回字段的分页变量，以及列表数据容器
• 对接后端接口：请求时携带当前页码参数，把返回的分页数据同步到组件状态
• 渲染列表与分页组件：用QList循环展示数据，QPagination绑定状态和切换事件

很多新手一开始容易忽略分页参数的绑定，导致QPagination无法正常工作，比如这样的代码：

<template>
  <div>
    <q-list>
      <q-item v-for="item in listData" :key="item.id">
        <q-item-label>{{ item.name }}</q-item-label>
      </q-item>
    </q-list>
    <q-pagination v-model="currentPage" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      listData: []
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      const res = await this.$axios.get('/api/items')
      this.listData = res.data.data
      // 这里没有同步Laravel返回的总页数、当前页等参数，QPagination不知道分页边界
    }
  }
}
</script>

<template>
  <div class="q-pa-md">
    <!-- 带边框的列表组件 -->
    <q-list bordered class="q-mb-md">
      <q-item 
        v-for="item in listData" 
        :key="item.id" 
        class="q-pa-md"
      >
        <q-item-section>
          <q-item-label>{{ item.title }}</q-item-label>
          <q-item-label caption>{{ item.description }}</q-item-label>
        </q-item-section>
      </q-item>
    </q-list>

    <!-- 分页组件 -->
    <q-pagination
      v-model="pagination.current_page"
      :max="pagination.last_page"
      :disabled="pagination.last_page <= 1"
      @input="fetchData"
      class="q-mt-md"
    />
  </div>
</template>

<script>
export default {
  name: 'ItemPaginationList',
  data() {
    return {
      // 完全对应Laravel paginate返回的分页字段
      pagination: {
        current_page: 1,
        last_page: 1,
        per_page: 10 // 可根据需求自定义每页条数
      },
      listData: []
    }
  },
  mounted() {
    // 初始化加载第一页数据
    this.fetchData()
  },
  methods: {
    async fetchData() {
      try {
        // 请求时携带当前页码参数，Laravel会自动识别处理
        const response = await this.$axios.get('/api/items', {
          params: {
            page: this.pagination.current_page,
            per_page: this.pagination.per_page
          }
        })

        // 解构后端返回的分页数据
        const { data, current_page, last_page, per_page } = response.data

        // 更新组件状态
        this.listData = data
        this.pagination = {
          current_page,
          last_page,
          per_page
        }
      } catch (error) {
        console.error('加载分页数据失败:', error)
      }
    }
  }
}
</script>

• QPagination的v-model绑定current_page，:max绑定last_page，组件会自动生成正确的页码范围
• 点击分页按钮时，@input事件会触发fetchData，自动携带最新页码请求后端
• Laravel的paginate()方法会自动处理page和per_page参数，返回对应页的数据，无需额外处理

内容的提问来源于stack exchange，提问作者jose