时间戳

首页 > 解决方案 > Vue-Paginate如何导入和使用？

javascript - Vue-Paginate如何导入和使用？

问题描述

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

标签： javascriptvue.jspaginationvuejs2

解决方案

我通过在我的 index.html 中使用这个引导版本使它工作：cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css

推荐阅读