[英]VueJS - Make the drop-down list display alphabetically
I am trying to sort a list alphabetically and am not having any success.我正在尝试按字母顺序对列表进行排序,但没有任何成功。
I have a computed property that pulls in the data using Axios.我有一个计算属性,它使用 Axios 提取数据。 It removes any duplicates and splits the array of objects at each comma.
它删除所有重复项并在每个逗号处拆分对象数组。 This works well.
这很好用。
I have tried various ways to try and display the list AZ inc.我尝试了各种方法来尝试显示列表 AZ inc。 the example below.
下面的例子。
Would someone please be kind enough to help?有人会好心帮忙吗?
The data looks like this:数据如下所示:
"C": "UK, EU, EEA, UK and Islands, England Wales & Northern Ireland, International, UK, EU, EEA, UK and Islands,England Wales & Northern Ireland",
And my computed property like this:我的计算属性是这样的:
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
);
},
},
};
You're currently sorting an empty array ( nationalities2
).您当前正在对一个空数组(
nationalities2
)进行排序。 Instead, sort nationalities
.相反,对
nationalities
进行排序。
The
sort()
method sorts the elements of an array in place and returns the sorted array.sort()
方法对数组的元素进行就地排序并返回排序后的数组。
Here is a simplified example of how to fix the issue:以下是如何解决此问题的简化示例:
// 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))
Which logs:哪些日志:
[
"EEA",
"EU",
"International",
"UK",
"UK and Islands",
]
The full revised code would be:完整修改后的代码将是:
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);
},
},
Note, as @JamesWhiteley said in the comments, sort()
without any parameters will sort strings alphabetically by default, and we don't need a custom sorting function.请注意,正如@JamesWhiteley 在评论中所说,默认情况下,不带任何参数的
sort()
将按字母顺序对字符串进行排序,我们不需要自定义排序 function。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.