如何使用 vue 组件 js 和 axios 路由器视图在 laravel 中进行分页

Question

现在我遇到了一些问题，那就是对存储在任务表中的所有数据进行分页， 我已经尝试了一些代码来在 laravel 中进行分页，但代码不适用于 .vue 文件扩展名。 我正在使用laravel 5.8，vue.js，axios和vue-router-view。

我的代码不起作用或整体上可能是错误的，

这是我的任务控制器文件中的索引函数：

public function index(Request $request)
{
// return new taskCollection(Task::orderBy('created_at', 'desc')->paginate(5));
$tasks = Task::orderBy('created_at', 'desc')->paginate(10);
return response()->json($tasks)
->withCallback($request->callback);
}

这是我从控制器给出的响应中获取数据的代码：

methods: {
getTaskList() {
let uri = `/api/tasks`;
this.axios
.get(uri)
.then(response => {
if (!this.tasks.data) {
this.tasks = response.data.data;
} else {
this.tasks.data.push(...response.data.data);
this.tasks.next_page_url = response.data.next_page_url;
}
})
.catch(function(error) {
console.log(error);
});
},

我想对数据进行分页，这样它就不会显示整个页面的所有数据。

Answer 1

重构引用此代码的代码。

首先，安装 Laravel Vue 分页

npm install laravel-vue-pagination

在您的应用程序中.JS

Vue.component('pagination', require('laravel-vue-pagination'));

在您的控制器中

public function index(){
return User::latest()->paginate(5);
}

在你的 Vue 文件中

<div class="card-body table-responsive p-0">
<table class="table table-hover">
<tbody>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Type</th>
<th>Registered At</th>
<th>Modify</th>
</tr>

<tr v-for="user in users.data" :key="user.id">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.email}}</td>
<td>{{user.type | upText}}</td>
<td>{{user.created_at | myDate}}</td>
<td>
<a href="#" @click="editModal(user)">
<i class="fa fa-edit blue"></i>
</a>
/
<a href="#" @click="deleteUser(user.id)">
<i class="fa fa-trash red"></i>
</a>
</td>
</tr>
</tbody></table>
</div>
<!-- /.card-body -->
<div class="card-footer">
<pagination :data="users" @pagination-change-page="getResults"></pagination>
</div>
</div>

在您的脚本中

getResults(page = 1) {
axios.get('api/user?page=' + page)
.then(response => {
this.users = response.data;
});
},

在 API 路由中

Route::apiResources(['user' => 'APIUserController']);