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

Question

[Kist9]

Всем привет , столкнулся с такой проблемой:
Хочу реализовать пагинацию для своего веб-приложения , но скрипт не работает , я еще начинающий разработчик во vue и у меня есть несколько вопросов:
Что делает свойство(не знаю как правильно назвать) "try" , если можете объясните поподробнее
Как мне вычесть длину массива и поделить ее на лимит объектов на одной странице? Чтобы в объект totalPages попало уже исходное кол-во страниц
Что делает свойство "async" , человеческого ответа найти не смог.

<template>
        <div class="pages__afisha">
            <div v-for="pageN in totalPages" :key="pageN">
                {{ page }}
            </div>
        </div>
</template>

<script>
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 },
],

page: 1,
totalPages: 0,
limit: 6,

methods: {
    async pagingationAfisha() {
        try {
            this.totalPages = Math.ceil(posts.length / this.limit)
        } catch (e) { alert('Ошибка') }
    }
}
</script>

Comments

[modelair]

у вас код невалиден, обновите вопрос

[Вадим]

Смотрите, дальше по тексту будут, как для новичка, не самые приятные ответы, но, поверьте, если Вы действительно хотите состояться как специалист в этой отрасли, то Вам стоит прислушаться к нижесказанному:

я еще начинающий разработчик во vue и у меня есть несколько вопросов

Среди Ваших вопросов нет вопросов, хоть как-то связанных со vue. Все Ваши вопросы в первую очередь про JS. Бросьте vue и идите учить основы JS. Без этого Вы будете писать отвратительный код и тратить кучу времени на поиск ошибок, потому что не будете понимать как оно работает.

Что делает свойство(не знаю как правильно назвать) "try" , если можете объясните поподробнее

Уважайте других. Это одна из базовых конструкций языка и информации о ней в интернете более чем достаточно. Было бы правильно, с Вашей стороны поступить следующим образом: Я прочитал про try catch это это и это, я не понял это и это и у меня вот такой вопрос.

Как мне вычесть длину массива

Длина массива всегда доступна, это основное свойство этой структуры данных. Её никак вычислять не нужно. Либо Вы плохо задали вопрос, либо основы JS Вы даже не начинали учить, а это критическое упущение.

и поделить ее на лимит объектов на одной странице

Не понятно про что вопрос. Не знаете операцию деления или что?

Что делает свойство "async"

Это так же базовая конструкция языка. Информации полно в интернете объясняющих её вдоль и поперёк.

Ресурсы для изучения:
Общие ссылки(на обоих ресурсах есть русский язык по всем или почти всем статьям):
https://learn.javascript.ru/
https://developer.mozilla.org/en-US/docs/Web/JavaScript

Относящиеся к вопросу(по 2 ссылки на тему, по 1 на каждый ресурс. Читайте там где удобнее, а лучше обе, если не поняли):
https://learn.javascript.ru/array
https://developer.mozilla.org/en-US/docs/Web/JavaS...
https://learn.javascript.ru/try-catch
https://developer.mozilla.org/en-US/docs/Web/JavaS...
https://learn.javascript.ru/async-await
https://developer.mozilla.org/en-US/docs/Web/JavaS...

Перед чтением про async лучше почитать про promise. Тема асинхронности не из простых.
https://learn.javascript.ru/promise-basics
https://developer.mozilla.org/en-US/docs/Web/JavaS...

Чтобы лучше понять асинхронность стоит так же почитать про event loop и как браузер выполняет задачи.
Тут уже ссылки не буду искать, скину лишь одну статью, дальше сами.
https://habr.com/ru/companies/yandex/articles/718084/

[imko]

Во вью начинающий а в жс не начинающий? Надо сначала языки сами учить а уж потом фреймворки

Answer 1

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