Блог

Я просматриваю массив в моем приложении VUE, который имеет следующую структуру

 [
{
  "id": 1,
  "brands": [
    {
      "name": "Mall",
      "id": 1
    },
    {
      "name": "Tanted",
      "id": 25
    },
    {
      "name": "Anteil",
      "id": 12
    },
    {
      "name": "Moscard",
      "id": 73
    }
  ]
},
{
  "id": 2,
  "brands": [
    {
      "name": "Yanre",
      "id": 6
    },
    {
      "name": "Alted",
      "id": 10
    },
    {
      "name": "Sillex",
      "id": 9
    },
    {
      "name": "Straf",
      "id": 78
    }
  ]
}
]

  

первое, что я делаю, чтобы показать различные параметры выбора, где я их показываю, — это фильтр по идентификатору

 computed: {
    filteredBrand() {
      var selectedBrand =
        !this.businessInfo || this.businessInfo.selectedBrand == 0
          ? 1
          : this.businessInfo.selectedBrand;
      return !this.$store.getters.brands
        ? null
        : this.$store.getters.brands.filter(
            item => item.id == selectedBrand
          )[0].brands;
    }
}


  

               <select
              v-model="businessInfo.selectedBrand"
              @change="onChangeBrand($event)">
              <option v-for="brand in filteredBrand" v-bind:key="brand.name">{{ brand.name }}</option>
              </select>


  

до этого момента мне удавалось показывать бренды, соответствующие каждому идентификатору в списке выбора, но я хотел отсортировать их также в алфавитном порядке, и я не могу найти способ объединить фильтр с сортировкой.
Я попытался объединить методы, но это возвращает синтаксическую ошибку.

 computed: {
    filteredBrand() {
      var selectedBrand =
        !this.businessInfo || this.businessInfo.selectedBrand == 0
          ? 1
          : this.businessInfo.selectedBrand;
      return !this.$store.getters.brands
        ? null
        : this.$store.getters.brands.filter(
            item => item.id == selectedBrand
          )[0].brands.sort(function(a, b) {
      return a.name === b.name ? 0 :  (a.name > b.name) || -1;
    });
    }
}


  

Как я могу это сделать?
Заранее спасибо всем за ваше время и помощь

Чтобы сравнить две строки лексикографически (свободно, в алфавитном порядке) в порядке возрастания (от А до Я), вы делаете это в обратном sort вызове:

 return a.name.localeCompare(b.name);
  

Для порядка убывания (Z-A) используйте

 return b.name.localeCompare(a.name);
  

Примечание: каждый раз, когда вы обнаруживаете, что пишете array.filter(/*...*/)[0] , пишите array.find(/*...*/) вместо этого. (Полизаполнение find , если вам нужна поддержка IE.) find Метод останавливается, когда находит первую совпадающую запись и возвращает эту запись, вместо того, чтобы перебирать весь массив, создавая новый массив из всех совпадающих записей. Вам не нужно просматривать весь массив и создавать новый, если вы просто собираетесь захватить первую запись. 🙂

Итак, объединив это с основным ответом выше:

   return !this.$store.getters.brands
    ? null
    : this.$store.getters.brands.find(
        item => item.id == selectedBrand
      ).brands.sort((a, b) => a.name.localeCompare(b.name));