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

我如何单击任何页码，然后按照用引导程序编写的代码向服务器请求该页？

我希望能有所帮助，谢谢。

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()的{{1}}获取您选择的页面。

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

如何与Vuetify和Laravel进行分页？

1 个答案: