Лучшая альтернатива написанию операторов Switch в VueJS компоненте фильтра? - PullRequest
Новая
       5

Лучшая альтернатива написанию операторов Switch в VueJS компоненте фильтра?

1 голос
/ 30 марта 2020

У меня есть Vue Компонент, который я создал, который выполняет простой фильтр. Я использую BootstrapVue.

Мой вопрос в том, что я знаю, что в JavaScript Заявления о переключениях не всегда рекомендуются из-за сложной отладки и вложенных ошибок, но что может быть лучшей альтернативой чему-либо как это выглядит? 

 computed: {
    products() {
      switch (this.selectedFilter) {
        case "all": {
          let products = [];
          let min = 0;
          for (let i = 0; i < productItems.length - 1; i++) {
            min = i;
            for (let j = i + 1; j < productItems.length; j++) {
              if (productItems[j].order < productItems[min].order) {
                min = j;
              }
            }
            let temp = productItems[min];
            productItems[min] = productItems[i];
            productItems[i] = temp;
          }
          productItems.forEach(product => {
            products.push(product);
          });
          return products;
        }
        case "subscriptions": {
          let products = [];
          productItems.forEach(product => {
            if (product.type == "recurring") {
              products.push(product);
            }
          });
          return products;
        }
        case "onetime": {
          let products = [];
          productItems.forEach(product => {
            if (product.type == "onetime") {
              products.push(product);
            }
          });
          return products;
        }
        case "purchased": {
          let products = [];
          productItems.forEach(product => {
            if (product.purchased) {
              products.push(product);
            }
          });
          return products;
        }
        case "unpurchased": {
          let products = [];
          productItems.forEach(product => {
            if (!product.purchased) {
              products.push(product);
            }
          });
          return products;
        }
        default:
          return "Product";
      }
    }
  },
  data() {...}

1 Ответ

2 голосов
/ 30 марта 2020

Использование операторов switch прекрасно в показанном вами контексте, в этом нет ничего плохого. Что может использовать некоторую работу, так это преобразовать результаты в удобный формат.

Использование Array.prototype.sort() и Array.prototype.filter() принесло бы вам большую пользу: 

switch (this.selectedFilter) {
  case "all":
    return productItems.slice().sort((a, b) => a.order - b.order);
  case "subscriptions":
    return productItems.filter(product => product.type === "recurring");
  case "onetime":
    return productItems.filter(product => product.type === "onetime");
  case "purchased":
    return productItems.filter(product => product.purchased);
  case "unpurchased":
    return productItems.filter(product => !product.purchased);
  default:
    return [];
}

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

...