Laravel and Vue Pagination Fail

Question

When I press the page 2 on pagination component, page=2 data comes to application and data never shows up on screen and pagination goes to 1 and everything is going to start point. I use bootstrap-vue for ui component library.

pagination component image:

Vue data variables:

isBusy: false,
output: {
    message: "",
    status: false
},
currentPage: 1,

tableData:{},
laravel api routes

Route::prefix('/pcustomers')->group( function() {
Route::post('/load', 'App\Http\Controllers\EmailListController@postPCustomer');
Route::middleware('auth:api')->post('/post', 'App\Http\Controllers\EmailListController@postPCustomer')->middleware(['web']);
Route::middleware('auth:api')->get('/all', 'App\Http\Controllers\EmailListController@allPCustomers')->middleware(['web']);
Route::middleware('auth:api')->get('/pcdata', 'App\Http\Controllers\EmailListController@pcData')->middleware(['web']);
Route::middleware('auth:api')->get('/delete', 'App\Http\Controllers\EmailListController@deletePCustomer')->middleware(['web']);
});

EmailListController function

public function pcData()
    {
    $pcData = DB::table('email_list')
    ->join('users', 'users.id', '=', 'email_list.workerId')
    ->select('email_list.*', 'users.username')
    ->paginate(100);

    return response()->json($pcData);
}

Pagination component:

<b-pagination
    v-model="currentPage"
    :total-rows="tableData.total"
    :per-page="tableData.to"
    @input="getNewPageData()"
    first-number
    last-number
    >
</b-pagination>

Here the axios post method for getting the data

getNewPageData(){
    let list = this;
    list.isBusy = true;
    const page = list.currentPage;
    axios.get("api/v1/pcustomers/pcdata?page="+page)
    .then(function (response) {
        list.tableData = response.data;
        list.isBusy = false;
    })
    .catch(function (error) {
        list.output = error;
    });
},

It works at here for page 1

created(){
    this.getNewPageData(this.currentPage);
}

Data Response for page 1:

{
   "current_page":1,
   "data":[
      "..."
   ],
   "first_page_url":"http:\/\/127.0.0.1:8000\/api\/v1\/pcustomers\/pcdata?page=1",
   "from":1,
   "last_page":4,
   "last_page_url":"http:\/\/127.0.0.1:8000\/api\/v1\/pcustomers\/pcdata?page=4",
   "links":[
      {
         "url":null,
         "label":"Previous",
         "active":false
      },
      {
         "url":"http:\/\/127.0.0.1:8000\/api\/v1\/pcustomers\/pcdata?page=1",
         "label":1,
         "active":true
      },
      {
         "url":"http:\/\/127.0.0.1:8000\/api\/v1\/pcustomers\/pcdata?page=2",
         "label":2,
         "active":false
      },
      {
         "url":"http:\/\/127.0.0.1:8000\/api\/v1\/pcustomers\/pcdata?page=3",
         "label":3,
         "active":false
      },
      {
         "url":"http:\/\/127.0.0.1:8000\/api\/v1\/pcustomers\/pcdata?page=4",
         "label":4,
         "active":false
      },
      {
         "url":"http:\/\/127.0.0.1:8000\/api\/v1\/pcustomers\/pcdata?page=2",
         "label":"Next",
         "active":false
      }
   ],
   "next_page_url":"http:\/\/127.0.0.1:8000\/api\/v1\/pcustomers\/pcdata?page=2",
   "path":"http:\/\/127.0.0.1:8000\/api\/v1\/pcustomers\/pcdata",
   "per_page":100,
   "prev_page_url":null,
   "to":100,
   "total":366
}

Answer 1

I did some changes on b-table and axios and it works now.

<b-table
 id="pcustomers-table"
 ref="pcustomers-table"
 :busy="isBusy"
 :items="tableData"
 :fields="fields"
 :per-page="resourceData.per_page"
 :sort-by.sync="sortBy"
 :sort-desc.sync="sortDesc"
 small
 striped
 hover
>

I removed :current-page="currentPage" here.

getPCustomersResourceData(){
            let list = this;
            list.isBusy = true;
            const page = list.currentPage;
            axios.get("api/v1/pcustomers/pcdata?page="+page)
            .then(function (response) {
                list.resourceData = response.data;
                list.tableData = list.resourceData.data;
                list.isBusy = false;
            })
            .catch(function (error) {
                list.output = error;
            });
        },

I get the whole data and separate here like:

resourceData: {},
tableData:[],

Thanks to github.com/gilbitron and Kamlesh Paul.