Как отсортировать в алфавитном порядке список параметров в форме 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>