laravel - 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":"[e-mail]",
                        "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>

标签： laravelvue.js

Answer 1

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

import pagination from 'laravel-vue-pagination';

Vue.component('pagination', pagination);