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

Я изучаю 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 будет поддерживать и будет работать так же.


vue.js vuejs2 v-for
person Nicolay Hekkens    schedule 07.08.2017    source источник
comment
vuejs.org/v2/guide/migration.html   -  person thanksd    schedule 07.08.2017

Ответы (1)


arrow_upward
3
arrow_downward

Начиная с 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.

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

person thanksd    schedule 07.08.2017
comment
Спасибо за помощь - person Nicolay Hekkens; 08.08.2017
comment
Я попытался сделать это с 5 результатами на страницу, и, похоже, первые пять выводятся в индексе 0. Возможно, можно было бы посмотреть, как он работает с 1 itemPerPage, но не более того. Спасибо! Вот обновленная скрипта: jsfiddle.net/b6xvcxLs/1 - person Nicolay Hekkens; 08.08.2017
comment
Решил! вот рабочая скрипка, она поддерживает более 1 результата, и нумерация страниц теперь правильная. jsfiddle.net/b6xvcxLs/1 - person Nicolay Hekkens; 08.08.2017