VueJS - 使下拉列表按字母顺序显示

Question

我正在尝试按字母顺序对列表进行排序，但没有任何成功。

我有一个计算属性，它使用 Axios 提取数据。 它删除所有重复项并在每个逗号处拆分对象数组。 这很好用。

我尝试了各种方法来尝试显示列表 AZ inc。 下面的例子。

有人会好心帮忙吗？

数据如下所示：

"C": "UK, EU, EEA, UK and Islands, England Wales & Northern Ireland, International, UK, EU, EEA, UK and Islands,England Wales & Northern Ireland",

我的计算属性是这样的：

computed: {
    nationalities() {
      return this.results.filter((result) => result.metaData.C);
    },

    uniquenationalities() {
      // All unique nationalities in metaC
      const metaGnationalities = this.results
        .filter((result) => result.metaData && result.metaData.C)
        .map((item) => item.metaData.C)
        .filter((nationality, i, arr) => arr.indexOf(nationality) === i);
      // Split multiple nationalities in strings and store in an array
      let nationalities = [];
      metaGnationalities.forEach((item) => {
        const splitArr = item.split(", ");
        nationalities = nationalities.concat(splitArr);
      });
       
       let nationalities2 = [];
      nationalities2.sort(function(a, b) {
        if (a.nationalities2 < b.nationalities2) {
           return -1;
         }
         if (a.nationalities2 > b.nationalities2) {
           return 1;
         }
         return 0;
       });

      // debugger;
      // Filter again for unique nationalities
      return nationalities2.filter(
        (nationality, i, arr) => arr.indexOf(nationality) === i
      );
    },
  },
};

Answer 1

您当前正在对一个空数组（ nationalities2 ）进行排序。 相反，对nationalities进行排序。

sort()方法对数组的元素进行就地排序并返回排序后的数组。

以下是如何解决此问题的简化示例：

// Assuming there is a typo in the last comma (missing space after it)
const C = "UK, EU, EEA, UK and Islands, England Wales & Northern Ireland, International, UK, EU, EEA, UK and Islands, England Wales & Northern Ireland";

function uniquenationalities(inputString) {
  const nationalities = inputString.split(", ");

  // Instead of sorting 'nationalities2',
  // sort, filter, and return 'nationalities'
  return nationalities
    .sort()
    .filter(
      (nationality, i, arr) =>
        arr.indexOf(nationality) === i
    );
}

console.log(uniquenationalities(C))

哪些日志：

[
  "EEA",
  "EU",
  "International",
  "UK",
  "UK and Islands",
]

完整修改后的代码将是：

computed: {
  nationalities() {
    return this.results.filter((result) => result.metaData.C);
  },

  uniquenationalities() {
    // All unique nationalities in metaC
    const metaGnationalities = this.results
      .filter((result) => result.metaData && result.metaData.C)
      .map((item) => item.metaData.C)
      .filter((nationality, i, arr) => arr.indexOf(nationality) === i);

    // Split multiple nationalities in strings and store in an array
    let nationalities = [];
    metaGnationalities.forEach((item) => {
      const splitArr = item.split(", ");
      nationalities = nationalities.concat(splitArr);
    });

    return nationalities
      .sort()
      .filter((nationality, i, arr) => arr.indexOf(nationality) === i);
    },
},

请注意，正如@JamesWhiteley 在评论中所说，默认情况下，不带任何参数的sort()将按字母顺序对字符串进行排序，我们不需要自定义排序 function。