This repository was archived by the owner on Dec 13, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 34
This repository was archived by the owner on Dec 13, 2022. It is now read-only.
Does not work "vue-bootstrap-pagination": "^2.10.3" #21
Copy link
Copy link
Open
Description
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>
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
No labels