vue pagination code example
Example 1: laravel pagination vuetify
<v-pagination
v-model="pagination.current"
:length="pagination.total"
@input="onPageChange"
></v-pagination>
Example 2: pagination in b table in bootstrap vue
new Vue({
el: '#app',
data() {
return {
items: [],
fields: [{
key: 'postId',
label: 'Post ID'
},
{
key: 'id',
label: 'ID'
},
{
key: 'name',
label: 'Name'
},
{
key: 'email',
label: 'Email'
},
{
key: 'body',
label: 'Body'
}
],
currentPage: 0,
perPage: 10,
totalItems: 0
}
},
mounted() {
this.fetchData().catch(error => {
console.error(error)
})
},
methods: {
async fetchData() {
this.items = await fetch(`https://jsonplaceholder.typicode.com/comments?_page=${this.currentPage}&_limit=${this.perPage}`)
.then(res => {
this.totalItems = parseInt(res.headers.get('x-total-count'), 10)
return res.json()
})
.then(items => items)
}
},
watch: {
currentPage: {
handler: function(value) {
this.fetchData().catch(error => {
console.error(error)
})
}
}
}
})
Example 3: laravel pagination vuetify
export default {
data() {
return {
users: null,
pagination: {
current: 1,
total: 0
}
}
},
methods: {
getUsers() {
window.axios.get('/api/users?page=' + this.pagination.current)
.then(response => {
this.users = response.data.data;
this.pagination.current = response.data.current_page;
this.pagination.total = response.data.last_page;
});
},
onPageChange() {
this.getUsers();
}
},
mounted() {
this.getUsers();
}
}