Laravel和Vue分页失败

问题描述

当我按分页组件上的第2页时，page = 2数据进入应用程序，并且数据从不显示在屏幕上，分页变为1，一切都将开始。我将bootstrap-vue用于ui组件库。

分页组件图片：

Vue数据变量：

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函数

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

分页组件：

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

这里是axios post方法，用于获取数据

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

在此处适用于第1页

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

第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,{
         "url":"http:\/\/127.0.0.1:8000\/api\/v1\/pcustomers\/pcdata?page=3","label":3,{
         "url":"http:\/\/127.0.0.1:8000\/api\/v1\/pcustomers\/pcdata?page=4","label":4,"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
}

解决方法

我在b表和axios上做了一些更改，并且现在可以使用了。

<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
>

我在这里删除了：current-page =“ currentPage”。

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

我得到了全部数据，并在此处分开，例如：

resourceData: {},tableData:[],

感谢github.com/gilbitron和Kamlesh Paul。