Vue.js: can't orderBy in v-for
orderBy Filter is removed in vue.js v-2.
Quoted from vue.js docs
Instead of:
<p v-for="user in users | orderBy 'name'">{{ user.name }}</p>
Use lodash’s orderBy (or possibly sortBy) in a computed property:
<p v-for="user in orderedUsers">{{ user.name }}</p>
computed: { orderedUsers: function () { return _.orderBy(this.users, 'name') } }
Reference:
https://vuejs.org/v2/guide/migration.html#Replacing-the-orderBy-Filter
You can also use vue2 filters package.
- First install it using npm.
npm install vue2-filters
- Then, add it in your component or globally.
import Vue from 'vue' import Vue2Filters from 'vue2-filters' Vue.use(Vue2Filters)
- To use one of the predefined methods (such as limitBy, filterBy, find, or orderBy) in your component, you also need to add Vue2Filters.mixin to mixin list:
import Vue2Filters from 'vue2-filters' export default { ... mixins: [Vue2Filters.mixin], ... }
- After that use it in the template
<li v-for="c in orderBy(rooms,'last_iteraction')">
There is a list of predefined filters.check it out.
Reference:
https://github.com/freearhey/vue2-filters