Vue-Paginate, как импортировать и использовать? - PullRequest
Новая
       11

Vue-Paginate, как импортировать и использовать?

0 голосов
/ 17 октября 2018

У меня в настоящее время есть базовая система нумерации страниц.Но я хочу сделать его немного сложнее, используя - https://github.com/lokyoung/vuejs-paginate#readme

Но по какой-то причине я просто не могу заставить его работать!

Прямо сейчас мой рабочий кодвыглядит так - 

<div v-if="totalPages() > 1" class="pagination-wrapper">
    <!-- <span v-if="showPreviousLink()" class="pagination-btn" v-on:click="updatePage(currentPage - 1)"><</span> -->

    <!-- <span v-if="showNextLink()" class="pagination-btn" v-on:click="updatePage(currentPage + 1)">></span> -->


    <div class="page-buttons-wrapper">
        <button v-if="currentPage > 0" class="page-button" v-on:click="updatePage(currentPage - 1)"><p class="light semibold"><</p></button>

        <button class="page-button" v-for="(page, index) in totalPages()" :key="index" v-on:click="updatePage(index)">
            <p class="light semibold">{{ index + 1}}</p>
        </button>

        <button v-if="currentPage < totalPages() - 1 " class="page-button" v-on:click="updatePage(currentPage + 1)"><p class="light semibold">></p></button>
    </div>
    <div class="page-count">
        <h6 class="dark-grey">Page {{ currentPage + 1}} of {{ totalPages() }}</h6>
    </div>

</div>

По сути, есть +1 для следующего, -1 для предыдущего и «перейти на страницу X» для каждой кнопки.Что хорошо.Но я хочу сделать его более перспективным (отсюда и надежда использовать вышеупомянутый пакет.

Проблема в том, что после установки через NPM и использования даже их основного текста / примера я не могу заставить его работать)(их демонстрация здесь https://jsfiddle.net/lokyoung/u3u3nzns/, даже при копировании строки за строкой, я просто не могу заставить ее работать)

Я думаю, может быть, есть какой-то конкретный способ его использования?в основном просто такие же, как у них на демо. Так что понятия не имею, почему он ничего не сделает: s

...