Sort list with vue.js

Question

I'm having trouble sorting a list on my page, I can sort the list of processes by process name, but when I try to sort by manager name it does not sort. Note: Within the process class there is a user-type object that in this case is the manager.

methods: {
    sortProcess: function(key) {
      this.processes.sort(function(a, b) {
        return a[key].localeCompare(b[key]);
      });
    },
    sortManager: function(key) {
      this.processes.manager.sort(function(a, b) {
        return a[key].localeCompare(b[key]);
      });
    }
}
  

<v-toolbar-items>
            <v-menu flat>
              <v-btn flat slot="activator">
                <span flat>List by:</span>
                <v-icon dark>arrow_drop_down</v-icon>
              </v-btn>
              <v-list>
                <v-list-tile @click="sortProcesso('name')">
                  <v-list-tile-title>Process name</v-list-tile-title>
                </v-list-tile>
                <v-list-tile @click="sortManager('name')">
                  <v-list-tile-title>Manager name</v-list-tile-title>
                </v-list-tile>
              </v-list>
            </v-menu>
</v-toolbar-items>

<div v-for="process in processes" :key="process.id"> 
          <v-card flat class="pa-5 shadow">
            <v-flex xs12 id="block">
              <div id="button">
                <v-toolbar-items class="ml-3">
                  <v-menu flat>
                    <v-btn flat slot="activator">
                      Ações
                      <i class="material-icons">settings</i>
                    </v-btn>

                    <v-list>
                      <v-list-tile @click="">
                        <v-btn color="primary" flat>
                          <i class="material-icons">create</i>Edit
                        </v-btn>
                      </v-list-tile>
                      <v-list-tile @click="">
                        <v-btn color="primary" flat>
                          <i class="material-icons">delete</i>Delete
                        </v-btn>
                      </v-list-tile>
                    </v-list>
                  </v-menu>
                  <v-btn flat slot="activator">
                    Detalhes
                    <i class="material-icons">keyboard_arrow_down</i>
                  </v-btn>
                </v-toolbar-items>
              </div>
              <h5>Process: {{process.name}}</h5>
            </v-flex>

            <v-layout row wrap>
              <v-flex xs13 md6 class="text-xs-center">
                <div class="titulo">Project Manager</div>
                <hr size="0.1">
                <div class="resp">{{process.manager.name}}</div>
                <hr size="0.1">
              </v-flex>
              <v-flex xs13resp md6 class="text-xs-center">
                <div class="titulo">Office</div>
                <hr size="0.1">
                <div class="resp">{{}}</div>
                <hr size="0.1">
              </v-flex>
            </v-layout>
          </v-card>
          <br>
    </div> 

I do not know why the sort Manager method is not taking the manager's name

Answer 1

You call sort on the Array you want to sort. In both cases you want to sort the list of processes. In case of sortManager, you are actually trying to sort the object containing a manager, which does not end well for obvious reasons.

Instead you will need to access the property two layers deep. The easiest way to do that is probably by defining a path with an array, then going through that array to find the key you want to compare.

sortProcess (path) {
  this.processes.sort(function(a, b) {
    let valueInA = a;
    let valueInB = b;
    for (const key of paths) {
      // We forego any checks here to see if getting the key is even possible
      // Make sure that the key you are trying to access actually exists all the time
      valueInA = valueInA[key];
      valueInB = valueInB[key];
    }

    return valueInA.localeCompare(valueInB);
  });
},

Now you can call the function with sortProcess(['name']) or with sortProcess(['manager', 'name']).