0

目前，我使用 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，而且我正在修改其他人编写的代码。

谢谢！

4

1 回答 1

1

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

在这个数组中，有一个 key@attributes包含一个带有 key 的对象Name，这可能是您想要用于排序的对象。

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

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>
于 2018-05-23T12:51:24.073 回答