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>

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

1 个答案: