文章/答案/技术大牛

发布

社区首页 >问答首页 >分页在Vuejs2中不起作用

问分页在Vuejs2中不起作用
EN

Stack Overflow用户

提问于 2017-09-25 03:34:15

回答 2查看 1.3K关注 0票数 0

我正在尝试在Vuejs2项目中进行分页，我写了一个代码，就像这个演示https://jsfiddle.net/os7hp1cy/48/中的代码一样

它在Vuejs 1 (vue-1.0.23)中工作正常，但是当我在Vuejs 2 (vue@2.4.2)中使用此代码时，它会显示以下错误消息：

[Vue warn]: Property or method "paginate" is not defined on the instance 

but referenced during render. Make sure to declare reactive data 

properties in the data option.

(found in <Root>)

我该如何修复这个错误，谢谢

pagination

vuejs2

回答 2

Stack Overflow用户

发布于 2017-09-25 22:09:40

在你的代码中有下面这一行：

v-for="user in users | filterBy searchKey | paginate"

而且所有的过滤器在vue2中都被移除了，所以你的代码将不能工作https://vuejs.org/v2/guide/migration.html#Filters

此外，您不应该将vue挂载到body：

[Vue warn]: Do not mount Vue to <html> or <body> - mount to normal elements instead.

您可以查看我的工作代码：https://jsfiddle.net/os7hp1cy/187/

票数 0

Stack Overflow用户

发布于 2018-01-21 16:22:28

由于这个过滤器迁移https://vuejs.org/v2/guide/migration.html#Filters-Outside-Text-Interpolations-removed，我已经派生了@imcvampire的代码，并为Vue 2制作了一个工作版本。

将分页方法移至computed：

paginate: function() {
        if (!this.users || this.users.length != this.users.length) {
            return
        }
        this.resultCount = this.users.length
        if (this.currentPage >= this.totalPages) {
          this.currentPage = this.totalPages
        }
        var index = this.currentPage * this.itemsPerPage - this.itemsPerPage
        return this.users.slice(index, index + this.itemsPerPage)
    }

警告:我没有应用文本过滤器，只是先应用了分页。

https://jsfiddle.net/c1ghkw2p/

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/46394053

复制

相似问题

问分页在Vuejs2中不起作用
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问分页在Vuejs2中不起作用EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问分页在Vuejs2中不起作用
EN