How to paginate with Vuetify and Laravel?

Question

Goodnight

I'm trying to do server side paging with Vuetify and Laravel.

But the methods provided by Vuetify have not worked for me to do it correctly. I have a completed page that I want to implement with the Vuetify components.

I attach my code made with simple 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>  

Method of page to server:

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

The previous code works correctly but without actually using the paging of the Vuetify component.

Using the Vuetify component for paging I only show the lentgh of the pagination but in no way I manage to pass between the pages provided by the server.

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

Looking for information indicate that using @input="next" I can call a method to go to the next page but what can I use to return?

How can I click on any page number and ask for the page to the server as in my code made with bootstrap?

I wish I could help and I thank you.

Answer 1

Here is what works for me with Laravel 5.5 and 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);
}

When your component is mounted, getUsers() will get called. pagination.current defaults to 1 so the first page will load. The response will set pagination.total. Vuetify handles binding the page buttons to pagination.current so that when you click one, pagination.current gets set to the page number and then @input triggers getUsers() which uses pagination.current to get the page you selected.

Note: in laravel 5.8, the pagination response object may have changed from response.data.current_page to response.data.meta.current_page and response.data.last_page to response.data.meta.last_page .