Как использовать пагинацию в Vue.js для разделения массива на страницы, зная его длину и ограничение на количество объектов на одной странице?

Для разделения массива на страницы с использованием пагинации в Vue.js, вы можете следовать следующим шагам:

1. Создайте компонент Pagination.vue:

```javascript
<template>
  <div>
    <ul>
      <li v-for="pageNumber in totalPages" :key="pageNumber" :class="{ active: currentPage === pageNumber }">
        <a @click="changePage(pageNumber)">{{ pageNumber }}</a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    totalItems: {
      type: Number,
      required: true
    },
    itemsPerPage: {
      type: Number,
      default: 10
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.totalItems / this.itemsPerPage);
    }
  },
  data() {
    return {
      currentPage: 1
    }
  },
  methods: {
    changePage(pageNumber) {
      this.currentPage = pageNumber;
      this.$emit('page-changed', pageNumber);
    }
  }
}
</script>
```

2. В компоненте, где вы хотите использовать пагинацию, импортируйте и используйте компонент Pagination.vue:

```javascript
<template>
  <div>
    <ul>
      <li v-for="item in displayedItems" :key="item.id">{{ item.name }}</li>
    </ul>
    <pagination :totalItems="items.length" :itemsPerPage="10" @page-changed="changePage"></pagination>
  </div>
</template>

<script>
import Pagination from './Pagination.vue';

export default {
  components: {
    Pagination
  },
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        // Остальные объекты в массиве
      ],
      currentPageItems: []
    }
  },
  computed: {
    displayedItems() {
      const startIndex = (this.currentPage - 1) * 10;
      const endIndex = startIndex + 10;
      this.currentPageItems = this.items.slice(startIndex, endIndex);
      return this.currentPageItems;
    }
  },
  methods: {
    changePage(pageNumber) {
      this.currentPage = pageNumber;
    }
  }
}
</script>
```

В приведенном выше примере, компонент Pagination.vue создает список страниц с помощью пропсов totalItems и itemsPerPage. При нажатии на страницу вызывается метод changePage, который устанавливает currentPage и генерирует событие page-changed, так что вы можете обновить текущую страницу в основном компоненте.

В основном компоненте, вы можете использовать displayedItems в качестве вычисляемого свойства для отображения элементов текущей страницы, основываясь на currentPage и itemsPerPage. Когда изменяется страница, метод changePage обновляет currentPage и displayedItems.

Убедитесь, что вы настроили items со своим массивом объектов и itemsPerPage на ваше предпочтение.

      

        {{p.id}}
        {{p.data}}
        {{p.title}} 
        {{p.age}}
        {{p.type}}
        {{p.card}}
      



  Previous


  Next

{{ pageNumber }}

```javascript
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 },
            ];
```