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

我如何单击任何页码，然后请求页面到服务器，就像用引导程序编写的代码一样？

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

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

拉拉韦尔

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 。