[Vuejs]-VUE3 compounding filters not working as intended

by

0👍

✅

holy crap I figured it out on my own.

my solution is now WAY simpler than the solution I was working with in the OP and gives the desired results. see the gif to see how it works now.

gif – https://i.stack.imgur.com/x3d4h.jpg

here is the code I came up with.

    //if a variable is null move on to the next filter or if the variable has a 
    //value then filter the results to include the value and move to the next  
    //filter. rinse and repeat for each filter.

    const Combined = computed(() => {
  return documents.value
    .filter((plants) => {
      return getZone.value == null || plants.Zone.includes(getZone.value); 
    })                                                                    
    .filter((plants) => {
      return month.value == null || plants.months.includes(month.value);
    })
    .filter((plants) => {
      return (
        plantT.value == null || plants.plantType.includes(plantT.value)
      );
    })
    .filter((plants) => {
      return toxic.value == null || plants.toxicPets.includes(toxic.value);
    });
});


//below takes the Combined filters property from above and runs it though another computed property to allow the user to type search in
//a input field. im running the search results through an array of multiple names per item since plants tend to have more than one name. so
//the user can search a varity of different names and still get a result that is correct. 

    const searchMatch = computed(() => {                               
      return Combined.value.filter((plant) => {
        let arr_lower = plant.otherNames.map(
          (item) => item.toLowerCase().indexOf(search.value.toLowerCase()) != -1
        ); //this function just returns true of false if the item matches the search results.
        return arr_lower.includes(true); //so here im just returning the arr_lower variable if it includes true.
      });
    });

Leave a comment