Recently, I developed a Vue Component that incorporates a simple filter feature using BootstrapVue.
My query pertains to JavaScript Switch Statements - it is common knowledge that they may not always be the most optimal choice due to potential debugging challenges and nested errors. Can anyone suggest an alternative approach that might be more efficient in handling scenarios like the one illustrated below?
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() {...}