Vue.js: can't orderBy in v-for

Solution 1:

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

Solution 2:

You can also use vue2 filters package.

1. First install it using npm.

npm install vue2-filters

2. Then, add it in your component or globally.

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

3. 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],
  ...
}

4. 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