# ArrayPagination
Paginates array, if the array changes size, it will handle the update
# State
The useArrayPagination
function exposes the following reactive state:
import { useArrayPagination } from "vue-composable";
const {
pageSize,
total,
currentPage,
offset,
lastPage,
result
} = useArrayPagination();
State | Type | Description |
---|---|---|
pageSize | Number | Current page size, allows to set the pageSize |
total | Number | Total elements |
currentPage | Number | Current page |
offset | Number | Current page offset from the beginning |
lastPage | Number | Last page number |
result | Array | Current page items |
# Methods
The useArrayPagination
function exposes the following methods:
import { useArrayPagination } from "vue-composable";
const { next, prev, first, last } = useArrayPagination();
Signature | Description |
---|---|
next() | Increments currentPage |
prev() | Decrements currentPage |
first() | Sets currentPage to 1 |
last() | Sets currentPage = lastPage |
# Example
page 1 of 334
- 0
- 1
- 2
# Code
<template>
<div>
<p>page {{ currentPage }} of {{ lastPage }}</p>
<p>
<button @click="prev">prev</button>
<button @click="next">next</button>
</p>
<ul>
<li v-for="n in result" :key="n">
{{ n }}
</li>
</ul>
</div>
</template>
<script>
import { useArrayPagination } from "vue-composable";
export default {
name: "array-pagination-example",
setup() {
const array = new Array(1000).fill(0).map((_, i) => i);
const { result, next, prev, currentPage, lastPage } = useArrayPagination(
array,
{
pageSize: 3
}
);
return { result, next, prev, currentPage, lastPage };
}
};
</script>
← pagination promise →