如何在 Vue.js/Buefy 表单中按字母顺序对选项列表进行排序?

Question

目前，我使用以下方法以 Vue.js/Buefy 形式显示每个城市的酒店列表：

<option
:value="h['@attributes'].Name"
v-for="h in cities[form.cities[i].index].Hotels.Hotel"
:key="cities[form.cities[i].index].Hotels.Hotel.Name"
v-if="isArray(form.cities[i].index)"
v-text="h['@attributes'].Name"></option>

我应该添加什么才能按字母顺序对它们进行排序？我很茫然，因为我不太了解 Vue/Buefy，我正在修改别人写的代码。

谢谢！

Answer 1

了解代码在做什么非常重要，这样您才能知道需要在何处进行更改。 您的循环v-for正在遍历您的数组cities[form.cities[i].index].Hotels.Hotel(命名对我来说似乎很奇怪(。

在这个数组中，有一个键@attributes，它保存一个带有键Name的对象，这可能是你想要用于排序的对象。

通常我会为这些东西使用计算属性，但由于您拥有基于参数(form.cities[i].index(的数组，我不确定这是否如此容易。因此，您可以使用一种方法来获取数组的排序版本。在你的 Vue 实例中，将以下内容添加到 "methods" 属性中：

methods: {
sortedHotels: function(hotels) {
tmp = this.hotels.slice(0);
tmp.sort(function(a,b) {
return (a['@attributes'].Name > b['@attributes'].Name) ? 1 : ((b['@attributes'].Name> a['@attributes'].Name) ? -1 : 0);
});
return tmp;
},
},

然后，不是遍历普通数组，而是遍历该数组的函数调用结果：

<option
:value="h['@attributes'].Name"
v-for="h in sortedHotels(cities[form.cities[i].index].Hotels.Hotel)"
:key="cities[form.cities[i].index].Hotels.Hotel.Name"
v-if="isArray(form.cities[i].index)"
v-text="h['@attributes'].Name"></option>