Question

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

我整合了这个并收到此错误：

表达式无效：v-for =＆＃34;用户中的用户| filterBy searchKey |分页＆＃34;

所以我做了一些挖掘，我发现它已从版本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.

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

1 个答案: