Vue v-для перехода с версии 1 на версию 2

Question

Я изучаю Vue.js и нашел эту скрипку, которая делает именно то, что я хочу.

Вот скрипка: https://jsfiddle.net/os7hp1cy/48/

Я интегрировал это и получаю эту ошибку:

недопустимое выражение: v-for="пользователь в пользователях | 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 version запускает индекс с 1 вместо 0. Итак, вам необходимо обновить логику в зависимости от начального индекса 0.

Вот рабочая скрипка.