Понимание того, как правильно добавить нумерацию страниц с Bootstrap vue - PullRequest
Новая
       30

Понимание того, как правильно добавить нумерацию страниц с Bootstrap vue

0 голосов
/ 07 марта 2020

Я использую Vue и Vue Bootsrap. Я написал следующий код: 

<b-card border-variant="primary" header="Results:" header-bg-variant="primary" header-text-variant="white" align="center">
    <div v-if="loading">
        <img width="50px" height="50px" src="/assets/img/loading.gif" />
    </div>
    <div v-else-if="tools.length">
        <div id="app" class="container">
            <div class="grid">
                <article v-for="tool in tools">
                    <div class="title">
                        <h3>{{capitalizeFirstLetter(tool.name)}}</h3>
                    </div>
                    <div class="description">
                        {{tool.description}}
                    </div>
                </article>
            </div>
        </div>
    </div>
</b-card>

Я хочу добавить нумерацию страниц. Каждая страница должна содержать до 9 карточек. В документах было предложено добавить: 

<div class="overflow-auto">
    <b-pagination
        v-model="currentPage"
        :total-rows="rows"
        :per-page="perPage"
        first-text="First"
        prev-text="Prev"
        next-text="Next"
        last-text="Last"
    ></b-pagination>
</div>

Но как мне обернуть карты и показать только 9?

1 Ответ

1 голос
/ 07 марта 2020

<article v-for="tool in tools.slice((currentPage-1)*perPage,(currentPage-1)*perPage+perPage)" :key=tool> просто нарежьте ваш массив в соответствии с текущей страницей

вы можете проверить скрипку здесь https://jsfiddle.net/allanbanis/La8b0k23/21/

PS: я не использую 9 в качестве значения на страницу, потому что я скопировал и вставил только 9 уникальных записей [Глупый я], поэтому каждая страница выглядела бы одинаково, если бы я использовал 9

...