Question

我目前有一个基本的分页系统。但是我希望通过使用-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

Answer 1

我通过在index.html中使用此引导程序版本来使其工作： cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css

Vue分页如何导入和使用？

1 个答案: