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

Question

Now I have some problem that is to paginate all data stored in my Tasks table, I have trying some code in ways to make pagination in laravel, but the code not work with .vue file extension. I'm using laravel 5.8, vue.js, axios, and vue-router-view.

My code not working or its maybe wrong overall,

// this is my index function in my taskController file :

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);
    }

// and this is my code to fetch the data from response given by controller:

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);
        });
    },

//I want to paginate the data so it's not showing all data entire the page.

Answer 1

Refactor your code referring this.

First, install Laravel Vue pagination

npm install laravel-vue-pagination

in your APP.JS

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

in your Controller

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

in your Vue file

<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>

In your Script

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

in API route

Route::apiResources(['user' => 'API\UserController']);