Vue-Paginate如何导入和使用？答案

【问题标题】：Vue-Paginate how to import and use?Vue-Paginate如何导入和使用？
【发布时间】：2019-03-22 06:04:29
【问题描述】：

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

【问题讨论】：

能否分享组件和main.js中的尝试示例
哦，那是我的另一个临时分页，这不是我想要/需要的。它正在工作，但只是一个基本的左右箭头。我想要更高级的东西
你能说得更具体些吗
是的，抱歉，给我 2 分钟，我会用更多信息更新我的评论！ :)
请解释一下您的预期以及发生了什么？

标签： javascript vue.js pagination vuejs2

【解决方案1】：

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

【讨论】：