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

晚安

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

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

我附上了我用简单的 bootstrap 制作的代码。

  <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" 我可以调用一个方法转到下一页 但是我可以用什么返回？

如何单击任何页码并向服务器请求页面，就像我用 bootstrap 制作的代码一样？

我希望我能帮上忙，我感谢你。

最佳答案

以下是 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处理将页面按钮绑定(bind)到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.

关于laravel - 如何使用 Vuetify 和 Laravel 进行分页？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52697892/