Vue v-for changing from version 1 to version 2

Question

I'm learning Vue.js and found this fiddle that does exactly what I want to do.

Here is the fiddle: https://jsfiddle.net/os7hp1cy/48/

I integrated this and am getting this error:

invalid expression: v-for="user in users | filterBy searchKey | paginate"

So I've done some digging and I see it has changed from version 1 to 2. However, I don't know how to fix this.

<li v-for="user in users | filterBy searchKey | paginate">{{ user.name }}</li>

I would like to replace this with something that Vue 2 will support and will work the same way.

vuejs.org/v2/guide/migration.html

thanksd
– thanksd

2017-08-07 17:12:50 +00:00
Commented Aug 7, 2017 at 17:12 — thanksd
– thanksd, Commented Aug 7, 2017 at 17:12

tony19 · Accepted Answer · 2022-07-15 21:45:26Z

3

As of Vue version 2, filters can only be used inside text interpolations ({{ }} tags). See the documentation for migrating from Vue version 1.

You can use a computed property to filter the users and use that computed property in the v-for directive instead:

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>

Also, when using v-for to generate a range of numbers like you do for your page numbers, Vue version to starts the index at 1 instead of 0. So, you'll need to update the logic depending on a starting index of 0 as well.

Here's a working fiddle.

edited Jul 15, 2022 at 21:45

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 7, 2017 at 17:36

thanksd

55.8k23 gold badges167 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nicolay Hekkens Over a year ago

Thanks for the help

Nicolay Hekkens Over a year ago

I tried doing this with 5 results per page and it seems to outputting the first five in index 0. Could possibly have a look as its working with 1 itemsPerPage but not more than that. Thanks! Here is an updated fiddle: jsfiddle.net/b6xvcxLs/1

Nicolay Hekkens Over a year ago

Solved it! here is a working fiddle, it supports more than 1 result and the pagination is correct now. jsfiddle.net/b6xvcxLs/1

Collectives™ on Stack Overflow

Vue v-for changing from version 1 to version 2

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related