vue.js - Vue v-for 从版本 1 更改为版本 2

Question

我正在学习 Vue.js，发现这个小提琴正是我想做的。

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

我集成了这个并且收到了这个错误：

无效表达式：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) 中使用。请参阅从 Vue 版本 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 版本从 1 而不是 0 开始索引。因此，您还需要根据起始索引 0 来更新逻辑。

这是一个工作小提琴。