Andreas St

<template>
        <div class="pages__afisha">

    <ul>
      <li v-for="p in CursorAfisha">
        {{p.id}}
        {{p.data}}
        {{p.title}} 
        {{p.age}}
        {{p.type}}
        {{p.card}}
      </li>
    </ul>

    <button 
        :disabled="pageNumber === 0" 
        @click="prevPage">
      Previous
    </button>
    <button 
        :disabled="pageNumber >= pageCount -1" 
        @click="nextPage">
      Next
    </button>
    <div>{{ pageNumber }}</div>
        </div>
</template>

<script>

const posts = [
                { title: 'Привет сережа', data: '10 мая 2023', age: '11+', type: 'Мастер-класс', card: 'Пушкинская карта' , id:1 },
                { title: 'Привет Витя', data: '11 мая 2023', age: '12+', type: 'Мастер-класс', card: 'Пушкинская карта' , id:2 },
                { title: 'Привет Маша', data: '12 мая 2023', age: '13+', type: 'Мастер-класс', card: 'Пушкинская карта' , id: 3 },
                { title: 'Не только джаз на пруду', data: '13 мая 2023', age: '14+', type: 'Мастер-класс', card: 'Пушкинская карта' , id: 4 },
                { title: 'Не только джаз на пруду', data: '15 мая 2023', age: '15+', type: 'ЦМастер-класс', card: 'Пушкинская карта' , id: 5 },
                { title: 'Не только джаз на пруду', data: '29 мая 2023', age: '21+', type: 'ЖМастер-класс', card: 'Пушкинская карта Да' , id: 6 },
                { title: 'Не только джаз на пруду', data: '10 мая 2023', age: '40+', type: 'КМастер-класс', card: 'Пушкинская карта Нет' , id: 7 },
                { title: 'Не только джаз на пруду', data: '10 мая 2023', age: '10+', type: 'Мастер-класс', card: 'Пушкинская карта Да' , id: 8 },
                { title: 'Не только джаз на пруду', data: '10 мая 2023', age: '16+', type: 'Мастер-класс', card: 'Пушкинская карта Нет' , id: 9 },
                { title: 'Не только джаз на пруду', data: '10 мая 2023', age: '18+', type: 'Мастер-класс', card: 'Пушкинская карта' , id: 10 },
                { title: 'А Не только джаз на пруду', data: '10 мая 2023', age: '17+', type: 'ВМастер-класс', card: 'Пушкинская карта' , id: 11 },
                { title: 'А Не только джаз на пруду', data: '10 мая 2023', age: '17+', type: 'АМастер-класс', card: 'Пушкинская карта' , id: 12 },
            ];

import { defineComponent } from "vue";

export default defineComponent({
    
    name: 'PaginationTest',
    props:{
        posts:{
            type:Array,
            required:true,
            default: posts,
        },
        size:{
            type:Number,
            required:false,
            default: 5
        }
    },
    data(){
        return {
            page: 1,
            totalPages: 0,
            limit: 6,
            pageNumber: 0,            
        }
    },
    methods: {
        nextPage(){
            this.pageNumber++;
        },
        prevPage(){
            this.pageNumber--;
        },
    },
    computed:{
        pageCount(){
            let l = this.posts.length;
            let s = this.size;
            return Math.ceil(l/s);
        },
        CursorAfisha(){
          
            const start = this.pageNumber * this.size;
            const end = start + this.size;

            return this.posts.slice(start, end);
        },
    },
});
</script>