Pagination vue 3 - vue.js

Question

I have a local array with data which i pass to a table.
I created variables: page,limit,totalPage and function changePage.
In hook onMounted I calculate the number of pages based on the given limit.
Through the v-for loop, displayed the pages and made them clickable on the function, but I don't understand how to set the limit of displayed table elements, and how to make pagination work.
<template>
<div class="containerApp">
<Dialog
:showForm="showForm"
#changeToggle="changeToggle"
#hideDialog="hideDialog"
>
<PostForm #create="createPost" />
</Dialog>
<Select v-model="selectedSort" :options="sortOptions" />
</div>
<input type="text" v-model="searchQuery" />
<Table :tableData="searchAndSort" />
<div class="page_wrapper">
<div
v-for="(pageNumber, i) in totalPage"
:key="i"
#click="changePage(pageNumber)"
class="page"
:class="{ 'current-page': page === pageNumber }"
>
{{ pageNumber }}
</div>
</div>
</template>
<script>
import Table from "./components/Table.vue";
import Dialog from "./components/UI/Dialog.vue";
import PostForm from "./components/PostForm.vue";
import Select from "./components/UI/Select.vue";
import { ref } from "#vue/reactivity";
import { computed, onMounted } from "#vue/runtime-core";
export default {
name: "App",
components: {
...
},
setup() {
const showForm = ref(false);
const searchQuery = ref("");
const tableData = ref([
...
]);
const selectedSort = ref("");
const sortOptions = ref([
...
]);
const page = ref(1);
const limit = ref(5);
const totalPage = ref(0);
onMounted(() => {
totalPage.value = Math.ceil(tableData.value.length / limit.value);
});
const changePage = (pageNumber) => {
page.value = pageNumber;
};
const createPost = (post) => {
tableData.value.push(post);
showForm.value = false;
};
const changeToggle = (toggle) => {
showForm.value = !toggle;
};
const hideDialog = (val) => {
showForm.value = val;
};
const sortedPosts = computed(() => {
...
});
const searchAndSort = computed(() => {
...
});
return {
showForm,
tableData,
selectedSort,
sortOptions,
searchQuery,
changeToggle,
hideDialog,
createPost,
sortedPosts,
searchAndSort,
page,
limit,
totalPage,
changePage,
};
},
};
</script>

Answer 1

In order to show a portion of an array you can use Array.slice. (docs)
in your searchAndSort you should do something like this:
const searchAndSort = computed(() => {
const start = (page.value - 1) * limit.value;
const end = (page.value * limit.value)+1;
return tableData.value.slice(start, end);
});
page - 1 * limit - initially this will result in 0 * 5 meaning start from 0 (-1 is used because the page start from 1. When you go to the second page this will result in 1 * 5, etc.
end is defined by the limit itself multiplying the page.
So on the first page, you will slice the array from 0 to 5, on the second page - from 5 to 10, etc.
const end = (page.value * limit.value)+1; - +1 will give you the 5th element because Array.slice exlude the item at the end index)
You should add some checks as well.