Сортировка массива для двух свойств Vuejs

Как я могу отсортировать объект Array по двум свойствам, таким как «фамилия» - «имя»?

Я пробовал с конкатенацией, но это не работает, потому что сортируется только для второй сортировки:

computed:{
   sortedArray: function() {
      function name(a, b) {
         if (a.name < b.name) return -1;
         if (a.name > b.name) return 1;

         return 0;
      }
      function surname(a, b) {
         if (a.surname < b.surname) return -1;
         if (a.surname > b.surname) return 1;
         return 0;
      }

      return this.users.sort(surname).sort(name);
   }
}

Я пробовал также с:

function surname(a, b) {
   return a.surname < b.surname || a.name < b.name
}

Но возвращает массив не отсортированный по фамилии/имени


vue.js sorting
person LorenzoBerti    schedule 11.04.2018    source источник
comment
Возможный дубликат массива сортировки JavaScript по нескольким (числовым) полям   -  person raina77ow    schedule 11.04.2018
comment
Возможный дубликат Как вы сортируете массив по нескольким столбцам?< /а>   -  person th3n3wguy    schedule 11.04.2018

Ответы (1)


arrow_upward
1
arrow_downward

Вы на самом деле очень близки.

Проблема в том, когда вы делаете:

return this.users.sort(surname).sort(name);

Сначала вы сортируете по surname, а затем затем по name игнорируете surname.

Решение состоит в использовании функции, которая обрабатывает оба свойства одновременно. Так что объедините эти функции сортировки в одну.

Другое дело, что ваши вычисления сортируются на месте. Возможно, вы захотите клонировать массив и вместо этого возвратить отсортированную копию в вычисляемом свойстве.

new Vue({
  el: '#app',
  data: {
    users: [
      {name: "John", surname: "Nash"},
      {name: "Paul", surname: "Pringles"},
      {name: "Bob", surname: "Pringles"},
      {name: "Bob", surname: "Abbey"},
      {name: "Alice", surname: "Abbey"},
    ]
  },
  computed:{
     sortedArray: function() {
        function surnameName(a, b) {
           if (a.surname < b.surname) return -1;
           if (a.surname > b.surname) return 1;
           if (a.name < b.name) return -1;
           if (a.name > b.name) return 1;
           return 0;
        }
        // return this.users.sort(surnameName); // sorts in-place
        return [...this.users].sort(surnameName); // shallow clone + sort
     }
  }
})
<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>unsorted:<br>{{ users }}</p>
  <p>sorted:<br>{{ sortedArray }}</p>
</div>

person acdcjunior    schedule 11.04.2018
comment
Спасибо, даже за объяснение! - person LorenzoBerti; 11.04.2018