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。