Как отсортировать по алфавиту список опций в форме 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 добавьте в свойство «method» следующее:

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>