javascript - 使用 vue.js 对列表进行排序

Question

我在对页面上的列表进行排序时遇到问题，我可以按进程名称对进程列表进行排序，但是当我尝试按经理名称排序时，它不会排序。注意：在流程类中有一个用户类型的对象，在这种情况下是经理。

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> 

我不知道为什么 sort Manager 方法没有取经理的名字

标签： javascripthtmlvue.js

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']).