2017-08-07 262 views
0

我正在学习Vue.js,并发现这个小提琴完全符合我的要求。Vue v - 从版本1更改为版本2

这里是小提琴:https://jsfiddle.net/os7hp1cy/48/

我综合这一点,并正在此错误:

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

所以我做了一些挖掘,我看到它已经从版本1更改为2。但是,我不知道如何解决这个问题。

<li v-for="user in users | filterBy searchKey | paginate">{{ user.name }}</li> 

我想用Vue 2支持的东西替代它,并且将以相同的方式工作。

+0

https://vuejs.org/v2/guide/migration.html – thanksd

回答

3

从Vue版本2开始,滤镜只能在文本插值内部使用({{ }} tags)。 See the documentation for migrating from Vue version 1.

您可以使用一个计算的属性过滤,在v-for指令计算属性,而不是用户和使用:

computed: { 
    filteredUsers: function() { 
    let key = this.searchKey.toUpperCase(); 
    return this.users.filter((user) => { 
     return user.name.toUpperCase().indexOf(key) !== -1 
    }) 
    }, 
    paginatedUsers: function() { 
    var list = this.filteredUsers; 
    this.resultCount = list.length 
    if (this.currentPage >= this.totalPages) { 
     this.currentPage = this.totalPages 
    } 
    var index = this.currentPage * this.itemsPerPage 
    return list.slice(index - 1, index - 1 + this.itemsPerPage) 
    } 
} 
<li v-for="user in paginatedUsers">{{ user.name }}</li> 

此外,使用v-for时生成一个数字范围就像你为你的页码所做的那样,Vue version to starts the index at 1 instead of 0。因此,您需要根据起始索引0更新逻辑。

Here's a working fiddle.

+0

感谢您的帮助 –

+0

我试着用每页5个结果这样做的,它似乎在指数0输出的第5位。可能有一个看起来像1PerPerPage但没有更多的工作。谢谢!这是一个更新的小提琴:https://jsfiddle.net/b6xvcxLs/1/ –

+0

解决了它!这里是一个工作小提琴,它支持超过1个结果,现在分页是正确的。 https://jsfiddle.net/b6xvcxLs/1/ –