Laravel 和 Vue 分页失败
Laravel and Vue Pagination Fail
当我在分页组件上按第 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
}
我对 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。
当我在分页组件上按第 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
}
我对 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。