Support Laravel API Resources

[gilbitron]

This should be able to support the different format used by Laravel's API resources: https://laravel.com/docs/5.6/eloquent-resources#pagination

{
    "data": [
        {
            "id": 1,
            "name": "Eladio Schroeder Sr.",
            "email": "therese28@example.com",
        },
        {
            "id": 2,
            "name": "Liliana Mayert",
            "email": "evandervort@example.com",
        }
    ],
    "links":{
        "first": "http://example.com/pagination?page=1",
        "last": "http://example.com/pagination?page=1",
        "prev": null,
        "next": null
    },
    "meta":{
        "current_page": 1,
        "from": 1,
        "last_page": 1,
        "path": "http://example.com/pagination",
        "per_page": 15,
        "to": 10,
        "total": 10
    }
}

[Galironfydar]

A quick solution was to pass :data="example.meta" in the pagination prop. But, I would love to see better support for this 👍

[anroots]

Confirmed, caused some confusion to me as a new user - pagination controls just wouldn't appear (also, no errors in Console).

I have defined an API resource Route in Laravel:

Route::resource('productions', 'Api\ProductionController', ['as'=>'api']);

...which returns data, structured like this:

{
    "data": [
... truncated...
    ],
    "links": {
        "first": "http://dev.local/api/productions?page=1",
        "last": "http://dev.local/api/productions?page=24",
        "prev": null,
        "next": "http://dev.local/api/productions?page=2"
    },
    "meta": {
        "current_page": 1,
        "from": 1,
        "last_page": 24,
        "path": "http://dev.local/api/productions",
        "per_page": 15,
        "to": 15,
        "total": 359
    }
}

... and the Vue component looks like this:

<template>
    <div>
      <!-- truncated HTML -->
        <pagination :data="productions.meta" @pagination-change-page="getResults"></pagination>
</div>
</template>

<script>
    export default {
        data() {
            return {
                productions:  {},
            }
        },
        methods: {
            getResults(page = 1) {
                axios.get('/api/productions',{params:{page:page}})
                    .then(response => {
                        this.productions = response.data;
                    });
            }
        },
        mounted() {
            this.getResults()
        }
    }
</script>

Note the :data="productions.meta" bit in the <pagination> component usage - this is needed to get the control working with Laravel's ::resource routes, as @Galironfydar pointed out.

Nice-to-have would be either a code change to support ::resource routes out-of-the-box; or a documentation update in the Readme (+error message to Console); this will save future fools like me some time. :)

[reado]

To elaborate on @Galironfydar's response.. My collection has a lot of items and I also wanted to incorporate the First & Last links as well. I guess when returning a collection, the key for next and prev have also changed since they're lumped within the links object.

I created a computed property that combined and modified the Resource Collection response so that this component can use those URLs as well. Ideally this plugin would have better support for resources but this is currently working

<pagination :data="linkdata" @pagination-change-page="populateImages"></pagination>

  data() {
	return {
		images: {},
	}
  },
  mounted() {
	this.populateImages();
  },
  computed: {
        linkdata() {
            if (this.images.links) {
                Object.defineProperty(this.images.links, 'next_page_url', Object.getOwnPropertyDescriptor(this.images.links, 'next'));
                delete this.images.links['next'];

                Object.defineProperty(this.images.links, 'prev_page_url', Object.getOwnPropertyDescriptor(this.images.links, 'prev'));
                delete this.images.links['prev'];
            }

           const linkData = {
                ...this.images.meta,
                ...this.images.links,
            };
            return linkData;
        }
},

[ultrono]

Prev and next links do not appear when using api resources :/

E.g. the plugin checks for data.prev_page_url whereas an api resource has data.links.prev.

EDIT: ignore me, I've just noticed the workaround from by @reado

[gilbitron]

This has been added in v2.1.0