Get started with vuejs-paginate CDN
MIT licensed
VueJS Paginate is a Vue.js plugin for adding pagination functionality to data tables.
Tags:- vue
- paginate
- pagination
Stable version
Copied!
How to start using vuejs-paginate CDN
<template>
<div>
<v-paginate
v-model="currentPage"
:pages="totalPages"
:page-range="3"
@paginate="fetchData"
></v-paginate>
<ul>
<li v-for="item in items" :key="item.id">
{{ item.title }}
</li>
</ul>
</div>
</template>
<script>
import Vue from 'vue';
import axios from 'axios';
import VuePaginate from 'vuejs-paginate';
Vue.use(VuePaginate);
export default Vue.extend({
data() {
return {
currentPage: 1,
totalPages: 0,
items: [],
};
},
async created() {
this.fetchData();
},
methods: {
async fetchData() {
const response = await axios.get('https://api.example.com/items', {
params: {
page: this.currentPage,
},
});
this.items = response.data.data;
this.totalPages = response.data.meta.pagination.total;
},
},
});
</script>
Copied!