<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>
