Laravel中的分页vue数据

Question

我正在尝试对vue.js中的数据进行分页处理，我找到了用于它的软件包（gilbitron/laravel-vue-pagination）并安装了它，但是它不起作用，我认为我做了所有文档工作，但某种程度上它是行不通的，

controller

$projects = Project::orderby('id', 'desc')->paginate(10);

vue template

<pagination :data="projects" @pagination-change-page="load"></pagination>

component script

import pagination from 'laravel-vue-pagination';  //added here
    export default {
        data() {
            return {
                projects: []
            }
        },
        mounted: function() {
            this.load()
        },
        methods: {
            load: function(page = 1) { //added here
                axios.get('/api/projects?page=' + page) //added here
                .then(
                    response => {
                        this.projects =  (response.data);
                    }     
                )
                .catch(function (error) {
                    this.errors.push(error);
                    console.log(error);
                })
            }
        }
    }

错误

[Vue warn]: Unknown custom element: <pagination> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

问题

1. 我做错了吗？如何解决这个问题？

更新

controller

public function index()
    {
        $projects = Project::orderby('id', 'desc')->paginate(10);
        return $projects->map(function($project) {
            $data = collect($project);
            $data->put('owner', $project->user);
            return $data->all();
        });
    }

PS：之所以没有返回数据的原因是：

return response()->json([
  "projects" => $projects,
], 200);

是将项目用户添加到结果中。

更新2

我已经对控制器和脚本进行了一些更改，因此现在可以将数据作为json而不是数组获取，但是仍然无法获得分页：

我的数据现在看起来如何：

{
    "projects":{
            "current_page":1,
            "data":[
                {
                    "id":38,"
                    user_id":1,
                    "title":"wwwwwwwwwwwwwwwwwwwww",
                    "slug":"wwwwwwwwwwwwwwwwwwwww",
                    "body":"wwwwwwwwwwwwwwww",
                    "created_at":"2018-08-10 15:55:28",
                    "updated_at":"2018-08-10 15:55:28",
                    "user":{
                        "id":1,
                        "name":"admin",
                        "email":"admin@admin.com",
                        "created_at":"2018-08-02 10:57:47",
                        "updated_at":"2018-08-02 10:57:47",
                        "profile":{
                            "id":1,"
                            user_id":1,"
                            photo":"project-attachment-1533159133.png",
                            "created_at":"2018-08-02 10:57:48",
                            "updated_at":"2018-08-02 10:57:48"
                        }
                    }
                },
            ]
        }
}

controller

public function index()
    {
        $projects = Project::orderby('id', 'desc')->with('user')->with('user.profile')->paginate(10);
        return response()->json([
            "projects" => $projects,
        ], 200);
    }

component

<script>
import pagination from 'laravel-vue-pagination';

    export default {
        data() {
            return {
                projects: []
            }
        },
        mounted: function() {
            this.load()
        },
        components: {
            pagination
        },
        methods: {
            load: function(page = 1) {
                axios.get('/api/projects?page=' + page)
                .then(
                    response => {
                        this.projects =  (response.data.projects.data); //here has changed
                    }     
                )
                .catch(function (error) {
                    this.errors.push(error);
                    console.log(error);
                })
            }
        }
    }
</script>

Answer 1

您需要在当前组件中注册导入的pagination组件，即将components: { pagination }添加到export default：

export default {
  ...,
  components: {
    pagination
  }
}

Answer 2

尝试在资源JS文件中注册分页组件。

app.js

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

Answer 3

您需要注册导入的分页组件app.js

从“ laravel-vue-pagination”导入分页；

Vue.component（'pagination'，pagination）;