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>

我不知道为什么排序管理器方法不使用管理器名称

Answer 1

您在要排序的数组上调用sort。在这两种情况下，您都希望对进程列表进行排序。对于sortManager，您实际上是在尝试对包含管理器的对象进行排序，由于明显的原因，该管理器不能很好地结束。

相反，您将需要访问该属性两层深度。最简单的方法可能是通过使用数组定义路径，然后遍历该数组以查找要比较的键。

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);
  });
},

现在，您可以使用sortProcess(['name'])或sortProcess(['manager', 'name'])调用该函数。

用vue.js排序列表

1 个答案: