Discussion on: Vuetify Datatable, vuex and Laravel pagination (Updated)

[Sebastiangperez]

This was the solution:

The php section on Laravel Controller

    public function all(Request $request){
        $rowsPerPage = ($request->rowsPerPage);
        $customers = Customer::paginate($rowsPerPage);
        return response()->json(["customers" => $customers],200);
    }

The Route ( Laravel )

Route::get('customers','CustomersController@all');

On the store , the Action:

getCustomers (context,page){
 let page_number = page.page || this.state.pagination.page;
 let rowsPerPage = page.rowsPerPage || this.state.pagination.rowsPerPage;
 Axios.get('/api/customers?page=' + page_number + '&rowsPerPage=' + rowsPerPage)
 .then((response) => {
   context.commit('updateCustomers', response.data.customers);
 });
},

The Mutation :

 updateCustomers(state,payload){
   state.customers = payload.data
   state.pagination.page = payload.current_page
   state.pagination.rowsPerPage = payload.per_page
   state.totalItems = payload.total
 },

In the main file app.js
Computed :

        totalItems(){
            return this.$store.getters.totalItems
        },
        rowsPerPageItems(){
            return this.$store.getters.rowsPerPageItems
        },
        pagination: {
            get:function() {
                return this.$store.getters.pagination;
            },
            set:function(value){
                console.log(value);
                this.$store.dispatch('getCustomers',value)
            }
        },

The Watch:

pagination: {
                handler () {

                    this.loading = true
                    this.$store.dispatch('getCustomers',this.page)
                        .then(result => {
                            this.loading = false
                        })
                },
                update(){
                    console.log("update");
                    this.loading = true
                    this.$store.dispatch('getCustomers',this.page)
                        .then(result => {
                            this.loading = false
                        })
                },
                deep: true
            }

The html (v-data-table tag )

<v-data-table :headers="headers" :items="customers" class="elevation-1"
                    :pagination.sync="pagination" :total-items="totalItems" :rows-per-page-items="rowsPerPageItems">

[Carlos Lahrssen]

Awesome, thank you so much!

[privyreza]

Great post!

How you know how to make the auto search work?