Vue v - 从版本1更改为版本2

Question

我正在学习Vue.js，并发现这个小提琴完全符合我的要求。

这里是小提琴：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支持的东西替代它，并且将以相同的方式工作。

Answer 1

从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.