Skip to content
This repository has been archived by the owner on Dec 13, 2022. It is now read-only.

Does not work "vue-bootstrap-pagination": "^2.10.3" #21

Open
Jussiadev opened this issue Sep 28, 2017 · 1 comment
Open

Does not work "vue-bootstrap-pagination": "^2.10.3" #21

Jussiadev opened this issue Sep 28, 2017 · 1 comment

Comments

@Jussiadev
Copy link

I'm using your plugin. But he for some reason does not work for me. To check, I made an alert, but it is not called. What is the reason I can not understand

<template>
    <div>
    <ul class="list-group">
        <li class="list-group-item" v-for="item in items">{{ item.name }}</li>
    </ul>

        <no-ssr>
            <pagination :pagination="pagination" :callback="loadData" :options="paginationOptions"></pagination>
        </no-ssr>
    </div>
</template>

<script>
import axios from 'axios'
import $ from 'jquery';
import pagination from 'vue-bootstrap-pagination/dist/vue-bootstrap-pagination.common.js'

export default {
    data() {
        return {
            items: [],
            pagination: {
                total: 0,
                per_page: 12,    // required
                current_page: 1, // required
                last_page: 0,    // required
                from: 1,
                to: 12
            },
            paginationOptions: {
                offset: 4,
                previousText: 'Prev',
                nextText: 'Next',
                alwaysShowPrevNext: true
            }
        }
    },
    methods: {
        loadData() {
            alert(1);
            const options = {
                params: {
                    paginate: this.pagination.per_page,
                    page: this.pagination.current_page,
                    /* additional parameters */
                }
            };
            axios.get('http://core-rest.evgarik.ru/api/brends', options)
                .then(response => {
                    this.items = response.data.data;

                    // Overwrite pagination object
                    this.pagination = response.data.pagination; // API response edited to have pagination data under pagination object

                    // Or overwrite only values
                    /*
                     this.pagination.current_page = response.data.current_page;
                     this.pagination.last_page = response.data.last_page;
                     ...
                     */
                })
                .catch(error => {
                    // handle error
                });
        }
    },
    components: {
        pagination
    }
}
</script>
@Jussiadev Jussiadev changed the title Does not work vue-pagination Does not work "vue-bootstrap-pagination": "^2.10.3" Sep 28, 2017
@pogachar
Copy link
Collaborator

You are not paginating your response. If you're using Laravel check the documentation on pagination.
https://laravel.com/docs/5.5/pagination
https://laravel.com/docs/5.5/eloquent-resources#pagination (check the structure)

Response should be something like this:

data: [],
total: 20,
per_page: 12,
current_page: 1,
...
// or
data: [],
pagination: {...}

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants