Vue.js：无法在 v-for 中订购

Question

我已经升级到 Vue.js 2.0.5 并且 v-for 中的 orderBy 似乎不再工作了

<li v-for="c in rooms | orderBy 'last_iteraction'">

输出

• 无效表达式：v-for="c in rooms | orderBy 'last_iteraction'"

有人知道怎么解决吗？

Answer 1

orderBy 过滤器在 vue.js v-2 中被移除。

引用自 vue.js 文档

代替：

<p v-for="user in users | orderBy 'name'">{{ user.name }}</p>

在计算属性中使用 lodash 的 orderBy（或者可能是 sortBy）：

<p v-for="user in orderedUsers">{{ user.name }}</p>

computed: {
  orderedUsers: function () {
    return _.orderBy(this.users, 'name')
  }
}

参考：

https://vuejs.org/v2/guide/migration.html#Replacing-the-orderBy-Filter

Answer 2

你也可以使用vue2过滤器包。

1. 首先使用 npm 安装它。

npm install vue2-filters

1. 然后，将其添加到您的组件中或全局。

import Vue from 'vue'
import Vue2Filters from 'vue2-filters'
  
Vue.use(Vue2Filters)

1. 要在组件中使用预定义的方法之一（例如 limitBy、filterBy、find 或 orderBy），您还需要将 Vue2Filters.mixin 添加到 mixin 列表中：

import Vue2Filters from 'vue2-filters'

export default {
  ...
  mixins: [Vue2Filters.mixin],
  ...
}

4. 然后在模板中使用它

 <li v-for="c in orderBy(rooms,'last_iteraction')">

有一个预定义过滤器列表。检查一下。

参考：

https://github.com/freearhey/vue2-filters