2

I would like to use the VueJS orderBy filter with multiple fields. I've tried:

orderBy multiple fields in Angular (a similar approach)

and 

| orderBy 'ignored' true | orderBy 'name' 1 | ...

but neither solution works.

Is it possible to use the orderBy filter with multiple fields and if so, how? If not, can you suggest an alternative?

Community
  • 1
  • 1
Ben
  • 1,561
  • 4
  • 21
  • 33
  • 2
    Hello, you'll be able to orderBy multiple fields in vue@1.0.21 or in vue@1.1.0. The PR implementing this was merged today: https://github.com/vuejs/vue/pull/2562 The syntax will be : `contacts | orderBy ['name', 'surname', 'age'] reverse` – Posva Mar 30 '16 at 20:07

4 Answers4

2

In this case I would avoid the builtin orderBy filter. Other options:

  1. Create a computed that does this for you.
  2. Create a watch that automatically performs the sort and stores it into a new attribute (e.g. "something_sorted") whenever the array of items change.
  3. Create your own custom filter which performs a multicolumn sort. (http://vuejs.org/guide/custom-filter.html)
David K. Hess
  • 16,632
  • 2
  • 49
  • 73
0

My script is:

$scope.myarray = $filter('orderBy')(array, ['field1','field2']);
miken32
  • 42,008
  • 16
  • 111
  • 154
Jan Pierre Sanchez
  • 119
  • 4
0

You should be able to concatenate the terms like so;

<element v-for="item in array | orderBy 'ignored+name'">

ignored will filter alphabetically so I would suggest add a bang before ignored to flip the order.

Brad
  • 275
  • 1
  • 4
  • 9
0

i did it in v1 by using syntax below as @Posva said in comment.. contacts | orderBy ['name', 'surname', 'age'] reverse

Mehtab
  • 453
  • 5
  • 17