如何使用 Vuetify 和 Laravel 进行分页？

Question

晚安

我正在尝试使用 Vuetify 和 Laravel 进行服务器端分页。

但是 Vuetify 提供的方法并没有让我正确地做到这一点。我有一个完整的页面，我想用 Vuetify 组件实现。

我附上我用简单的引导程序编写的代码。

  <ul class="pagination">
      <li class="page-item" v-if="pagination.current_page > 1">
          <v-btn flat icon color="red lighten-2">
            <v-icon  @click.prevent="changePage(pagination.current_page - 1, search)">thumb_down</v-icon>
          </v-btn>
      </li>
      <li class="page-item" v-for="page in pagesNumber" :key="page" :class="[page == isActived ? 'active' : '']">
            <v-btn fab dark color="indigo" @click.prevent="changePage(page, search)" v-text="page">
            </v-btn>
      </li>
      <li class="page-item" v-if="pagination.current_page < pagination.last_page">             
          <v-btn flat icon color="red lighten-2">
            <v-icon  @click.prevent="changePage(pagination.current_page + 1, search)">thumb_down</v-icon>
          </v-btn>
      </li>
  </ul>  

页面到服务器的方法：

    methods:{
            get(page, search){
              let url = `http://127.0.0.1:8000/api/articles?page=${page}&search=${search}`;
              axios.get(url)
                  .then( response => {

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

前面的代码可以正常工作，但没有实际使用 Vuetify 组件的分页。

使用 Vuetify 组件进行分页我只显示分页的长度，但我无法在服务器提供的页面之间传递。

      <v-pagination
        v-model="pagination.current_page"
        :length="pagination.total"
        prev-icon="mdi-menu-left"
        next-icon="mdi-menu-right"
        @input="next"
      ></v-pagination>

找资料表明使用@input="next"可以调用方法跳转到下一页但是用什么返回呢？ p>

我如何点击任何页码并向服务器请求页面，就像我使用引导程序制作的代码一样？

希望能帮上忙，谢谢。

Answer 1

以下是 Laravel 5.5 和 Vuetify 1.3 对我有用的方法：

---

HTML

<v-pagination
    v-model="pagination.current"
    :length="pagination.total"
    @input="onPageChange"
></v-pagination>

---

JS

export default {
    data() {
        return {
            users: null,
            pagination: {
                current: 1,
                total: 0
            }
        }
    },
    methods: {
        getUsers() {
            window.axios.get('/api/users?page=' + this.pagination.current)
                .then(response => {
                    this.users = response.data.data;
                    this.pagination.current = response.data.current_page;
                    this.pagination.total = response.data.last_page;
                });
        },
        onPageChange() {
            this.getUsers();
        }
    },
    mounted() {
        this.getUsers();
    }
}

---

Laravel

public function users()
{
    $users = User::paginate(10);

    return response($users, 200);
}

当你的组件被挂载时，getUsers() 将被调用。 pagination.current 默认为 1，因此将加载第一页。响应将设置为pagination.total。 Vuetify 处理将页面按钮绑定到 pagination.current 以便当您单击一个时，pagination.current 被设置为页码，然后 @input 触发 getUsers() 使用 pagination.current 来获取您选择的页面。

注意：在 laravel 5.8 中，分页响应对象可能已从 response.data.current_page 更改为 response.data.meta.current_page 和 response.data.last_page 更改为 response.data.meta.last_page .