Pagination vue data in laravel

Question

I'm trying to get paginate works on my data in vue.js I found package for it (gilbitron/laravel-vue-pagination) and install it but it doesn't work, I think I did everything in documentation but somehow it won't work,

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

Error

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

Question

Did I do something wrong? How to fix this?

UPDATE

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: the reason I didn't return my data like:

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

was to add project user to the results.

Update 2

I have made some changes in my controller and script so I can get my data as json instead of array now, but still i cannot get pagination:

how my data look like now:

{
    "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":"[email protected]",
                        "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>

Khokon Ahmed · Accepted Answer · 2021-03-24 13:36:17Z

1

You need to register the imported pagination component app.js

import pagination from 'laravel-vue-pagination';

Vue.component('pagination', pagination);

edited Mar 24, 2021 at 13:36

answered Jun 8, 2020 at 5:50

Khokon Ahmed

212 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

akuiper · Accepted Answer · 2018-08-12 02:49:24Z

0

You need to register the imported pagination component in the current component, i.e. add components: { pagination } to export default:

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

answered Aug 12, 2018 at 2:49

akuiper

216k33 gold badges362 silver badges379 bronze badges

12 Comments

mafortis Over a year ago

now i get [Vue warn]: Invalid prop: type check failed for prop "data". Expected Object, got Array.

akuiper Over a year ago

As the error suggests, you may have defined the props data in pagination as Object but you are passing it an array when using it. You need to make the definition and the actual data passed down consistent.

mafortis Over a year ago

well the load is array of my projects and i loop them by <div class="row" v-for="project in projects" :key="project.slug"> how can I give it as object? (sorry newbie with vue)

akuiper Over a year ago

Where does the loop happen, in the current component or in the pagination component? Maybe you mean :data="project"?

mafortis Over a year ago

in my script i get array of data mounted: function() { this.load() }, methods: { load: and then in template i loop it by <div class="row" v-for="project in projects" :key="project.slug">

|

Collectives™ on Stack Overflow

Pagination vue data in laravel

Error

Question

UPDATE

Update 2

2 Answers 2

Comments

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Error

Question

UPDATE

Update 2

2 Answers 2

Comments

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related