Vue v - 從版本1更改爲版本2

Question

我正在學習Vue.js，並發現這個小提琴完全符合我的要求。

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

我綜合這一點，並正在此錯誤：

invalid expression: 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）。 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.