چگونه یک صفحه بندی پویا ساده از ابتدا در Vue ایجاد کنیم

import {ref} from "vue";
const questions = [
  {
    desc: "Jessica Gabriel recently posted interview questions for UI/UX Designer",
    date: "Friday 5th, 2022 6:45pm",
    field: "UI/UX Designers",
    id: 1,
    bg: "#FFFFFF",
  },
  {
    desc: "Jessica Gabriel recently posted interview questions for UI/UX Designer",
    date: "Friday 5th, 2022 6:45pm",
    field: "UI/UX Designers",
    id: 2,
    bg: "#F9F2EE",
  },
  {
    desc: "Jessica Gabriel recently posted interview questions for UI/UX Designer",
    date: "Friday 5th, 2022 6:45pm",
    field: "UI/UX Designers",
    id: 3,
    bg: "#FFFFFF",
  },
  {
    desc: "Jessica Gabriel recently posted interview questions for UI/UX Designer",
    date: "Friday 5th, 2022 6:45pm",
    field: "UI/UX Designers",
    id: 4,
    bg: "#F9F2EE",
  },
  {
    desc: "Jessica Gabriel recently posted interview questions for UI/UX Designer",
    date: "Friday 5th, 2022 6:45pm",
    field: "UI/UX Designers",
    id: 5,
    bg: "#FFFFFF",
  },
  {
    desc: "Jessica Gabriel recently posted interview questions for UI/UX Designer",
    date: "Friday 5th, 2022 6:45pm",
    field: "UI/UX Designers",
    id: 6,
    bg: "#F9F2EE",
  },
  {
    desc: "Jessica Gabriel recently posted interview questions for UI/UX Designer",
    date: "Friday 5th, 2022 6:45pm",
    field: "UI/UX Designers",
    id: 7,
    bg: "#FFFFFF",
  },
  {
    img: require("@/assets/contact/alao.png"),
    desc: "Jessica Gabriel recently posted interview questions for UI/UX Designer",
    date: "Friday 5th, 2022 6:45pm",
    field: "UI/UX Designers",
    id: 8,
    bg: "#FFFFFF",
  },
  {
    desc: "Jessica Gabriel recently posted interview questions for UI/UX Designer",
    date: "Friday 5th, 2022 6:45pm",
    field: "UI/UX Designers",
    id: 9,
    bg: "#F9F2EE",
  },
  {
    desc: "Jessica Gabriel recently posted interview questions for UI/UX Designer",
    date: "Friday 5th, 2022 6:45pm",
    field: "UI/UX Designers",
    id: 10,
    bg: "#FFFFFF",
  },
];

<template>
<div v-for="item in questions" :key="item.id">
{{ item.field }}
</div>
</template>

// stores the total number of items in array 
const totalPosts = questions.length;
// stores the total numbers of page the array creates depending of the number of posts per page
const pageNumbers = ref([]);
// total of items to be displayed on one page
const postPerPage = ref(5);
the number of the current page displayed
const currentPage = ref(1);
// setting starting point amd ending point. there is a differnce of 10 if start is 13 end woukd be 23. so in an current post it will be totalArray.value.slice(13,23)
const indexOfLastPost = ref();
const indexOfFirstPost = ref();
//shows the current array displayed
const currentPosts = ref()


indexOfLastPost.value = currentPage.value * postPerPage.value;
indexOfFirstPost.value = indexOfLastPost.value - postPerPage.value;
currentPosts.value = questions.slice(indexOfFirstPost.value, indexOfLastPost.value);
// total number of pages available
const paginateNumber = Math.ceil(totalPosts / postPerPage.value);

<template>
<div v-for="item in currentPosts" :key="item.id">
{{ item.field }}
</div>
</template>

<script>
for (let i = 1; i <= Math.ceil(totalPosts / postPerPage.value); i++) {
  pageNumbers.value.push(i);
}
</script>
<template>
 <div class="interview__pagination">
      <h6 @click="previous">Previous</h6>
      <div class="numbers">
        <p v-for="item in pageNumbers" :key="item" @click="currentPage = item">
          {{ item }}
        </p>
      </div>
      <h6 @click="next">Next</h6>
    </div>
</template>

const previous = () => {
  if (currentPage.value > 1) {
    currentPage.value = currentPage.value - 1;
  }
};
const next = () => {
  if (currentPage.value >= 1 && currentPage.value < paginateNumber) {
    currentPage.value = currentPage.value + 1;
  }
};

import { watch } from "vue";
 watch(currentPage, (currentValue, oldValue) => {
      indexOfLastPost.value = currentValue * postPerPage.value;
      indexOfFirstPost.value = indexOfLastPost.value - postPerPage.value;
      console.log(indexOfLastPost.value)
      currentPosts.value = questions.slice(indexOfFirstPost.value, indexOfLastPost.value);
    });