Question

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

我的代码无法正常工作，或者总体上来说可能是错误的，

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

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

在您的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中进行分页

1 个答案: