Laravel 和 Vue 分页失败

Question

当我在分页组件上按第 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,
         "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

我对 b-table 和 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。

Laravel 和 Vue 分页失败

Laravel and Vue Pagination Fail

laravel

vue.js

axios

laravel-pagination