Vue - Computed property to filter an array of products.

filteredProducts.ts

export function filteredProducts() {

  // get the total list of products
  let filteredProducts = useGlobalStore().products;

  // set criteria - examples var names here.
  const stamina = useGlobalStore().decisions.stamina
  const type = useGlobalStore().decisions.type
  const group = useGlobalStore().decisions.group

  const tags = useGlobalStore().selectedFilters
  const time = useGlobalStore().selectedDuration

  // Filter products based on criteria set above

  if (stamina) {

    filteredProducts = filteredProducts.filter(product => product[stamina]);

  }

  if (group) {

    filteredProducts = filteredProducts.filter(product => product[group]);

  }

  if (type) {

    filteredProducts = filteredProducts.filter(product => product[type]);

  }

  if (time) {
    filteredProducts = filteredProducts.filter(product => product.prep_time <= time);
  }

  if (tags && tags.length > 0) {
    filteredProducts = filteredProducts.filter(product => {
      return tags.some(tag => product.tags.includes(tag));
    });
  }
 
  
  // output a copy of the product list, less the items that do not match the filters.
  return filteredProducts;

}