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://v2.vuejs.org/v2/guide/migration.html#Replacing-the-orderBy-Filter

Answer 2

您还可以使用 vue2 过滤器包。

1. 首先使用 npm 安装它。

npm install vue2-filters

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

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

3. 要在组件中使用预定义的方法之一（例如 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