如何使用 vue 组件 js 和 axios router-view 在 laravel 中进行分页

Question

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

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

// 这是我在 taskController 文件中的索引函数：

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

参照此重构您的代码。

首先安装LaravelVue分页

npm install laravel-vue-pagination

在你的 APP.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' => 'API\UserController']);

如何使用 vue 组件 js 和 axios router-view 在 laravel 中进行分页

How to make pagination in laravel with vue component js and axios router-view

vue.js

vue-component

laravel-5.8