无法在Laravel Vue中显示分页的下一页内容

时间:2019-07-30 09:43:52

标签: laravel vue.js eloquent axios

由于我正在显示大数据的输出,因此我尝试使用laravel雄辩的paginate()对它进行分页。我成功进行了分页,但是当我尝试显示其他页面时却没有显示。我的代码或我要访问的链接有问题吗?

我的javascript方法和url:'/ getUsers'

getUsers() {
                let $this = this
                 this.axios.post(this.url).then((response) => {
                    this.users = response.data.data

                    $this.makePagination(response.data)
                })
            }
makePagination(data){
                let pagination = {
                    firstPageUrl: data.first_page_url,
                    currentPage: data.current_page,
                    lastPageUrl: data.last_page_url,
                    lastPage: data.last_page,
                    nextPageUrl: data.next_page_url,
                    prevPageUrl: data.prev_page_url
                }
                this.pagination = pagination
            }
fetchPaginatedUsers(url){

                this.url = url
                this.getUsers()
            }

Vue

<ul class="pagination">
                    <li class="page-item" v-on:click="fetchPaginatedUsers(pagination.prevPageUrl)" :disabled = "!pagination.prevPageUrl"><a class="page-link" href="#"> < </a></li>
                    <li class="page-item active">
                        <a class="page-link" href="#">{{pagination.currentPage}}</a>
                    </li>
                    <li class="page-item" v-on:click="fetchPaginatedUsers(pagination.nextPageUrl)" :disabled = "!pagination.nextPageUrl" ><a class="page-link" href="#"> > </a></li>
                </ul>
<table class="table" style="text-align: left;">
                <!--<thead>-->
                <tr>
                    <th scope="col">Image</th>
                    <th scope="col">Username</th>
                    <th scope="col">User Type</th>
                </tr>
                <!--</thead>-->
                <tbody>
                <tr v-for="data in filteredList">
                    <td><a v-bind:href=data.profile_picture><img v-bind:src= data.profile_picture style="width: 50px; height: auto;"/></a></td>
                    <td>{{data.userName}}</td>
                    <td>{{data.userType}}</td>
                    <td><b-button variant="primary" v-on:click="editUser(data.id)">View</b-button> </td>
                </tr>
                </tbody>
            </table>

控制器看起来像

public function getUsers() {
        $users = User::orderBy('id', 'desc')->paginate(10);
        return response()->json($users);
    }

路线

Route::post('/getUsers', 'UserController@getUsers');

我可以访问所有的分页数据,但无法在我创建的表中显示它们。

0 个答案:

没有答案