VUE3 复合过滤器未按预期工作

Question

所以我正在尝试使用多个过滤器选项来过滤结果。我尝试了很多不同的东西，它只应用了 2 个过滤器就可以按预期工作，但是如果我对搜索应用 3 个或更多过滤器，它将向搜索添加更多不符合所有条件的结果。

意味着应用的过滤器越多，结果应该被提炼到越窄。

这是一张显示发生了什么的 gif。 https://imgur.com/a/gAX3ntA

这是我目前使用的代码。它的臃肿超出了所有地狱，因为我不得不认为有一种更简单的方法可以使用复合过滤器来做到这一点。另外，如果我想添加更多过滤器选项，这种做事方式很快就会变得异常复杂。请告诉我有更简单的方法来做到这一点哈哈。

我正在使用 VUE 3 和合成 API。

 const months = computed(() => {
  return documents.value.filter((plants) =>
    plants.months.includes(month.value)
  );
});
const plantType = computed(() => {
  return documents.value.filter(
    (plants) => plants.plantType == plantT.value
  );
});

const Zone = computed(() => {
  return documents.value.filter((plants) =>
    plants.Zone.includes(getZone.value)
  );
});
const toxicPets = computed(() => {
  return documents.value.filter((plants) =>
    plants.toxicPets.includes(toxic.value)
  );
});

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

const Combined2 = computed(() => {
  gettingTwo = true;
  gettingThree = false;
  return documents.value.filter(
    (plants) =>
      (plants.Zone.includes(getZone.value) &&
        plants.months.includes(month.value)) ||
      (plants.Zone.includes(getZone.value) &&
        plants.plantType == plantT.value) ||
      (plants.Zone.includes(getZone.value) &&
        plants.toxicPets.includes(toxic.value)) ||
      (plants.months.includes(month.value) &&
        plants.toxicPets.includes(toxic.value)) ||
      (plants.plantType == plantT.value &&
        plants.toxicPets.includes(toxic.value)) ||
      (plants.plantType == plantT.value &&
        plants.months.includes(month.value))
  );
});

const Combined3 = computed(() => {
  gettingTwo = false;
  gettingThree = true;
  return documents.value.filter(
    (plants) =>
      (plants.Zone.includes(getZone.value) &&
        plants.plantType == plantT.value &&
        plants.months.includes(month.value)) ||
      (plants.Zone.includes(getZone.value) &&
        plants.toxicPets.includes(toxic.value) &&
        plants.plantType == plantT.value) ||
      (plants.Zone.includes(getZone.value) &&
        plants.months.includes(month.value) &&
        plants.toxicPets.includes(toxic.value)) ||
      (plants.plantType == plantT.value &&
        plants.months.includes(month.value) &&
        plants.toxicPets.includes(toxic.value))
  );
});

const searchMatch = computed(() => {
  if (Combined.value.length > 0) {
    console.log("getting 4");
    return Combined.value.filter(
      (plant) =>
        plant.plantName.toLowerCase().indexOf(search.value.toLowerCase()) !=
        -1
    );
  }
  if (Combined3.value.length > 0 && gettingTwo == false) {
    console.log("getting 3");
    return Combined3.value.filter(
      (plant) =>
        plant.plantName.toLowerCase().indexOf(search.value.toLowerCase()) !=
        -1
    );
  }
  if (Combined2.value.length > 0 && gettingThree == false) {
    console.log("getting 2");
    return Combined2.value.filter(
      (plant) =>
        plant.plantName.toLowerCase().indexOf(search.value.toLowerCase()) !=
        -1
    );
  }

  if (
    month.value !== null &&
    getZone.value == null &&
    toxic.value == null &&
    plantT.value == null
  ) {
    return months.value.filter(
      (plant) =>
        plant.plantName.toLowerCase().indexOf(search.value.toLowerCase()) !=
        -1
    );
  }
  if (
    getZone.value !== null &&
    plantT.value == null &&
    month.value == null &&
    toxic.value == null
  ) {
    return Zone.value.filter(
      (plant) =>
        plant.plantName.toLowerCase().indexOf(search.value.toLowerCase()) !=
        -1
    );
  }
  if (
    plantT.value !== null &&
    month.value == null &&
    getZone.value == null &&
    toxic.value == null
  ) {
    return plantType.value.filter(
      (plant) =>
        plant.plantName.toLowerCase().indexOf(search.value.toLowerCase()) !=
        -1
    );
  }
  if (
    toxic.value !== null &&
    plantT.value == null &&
    month.value == null &&
    getZone.value == null
  ) {
    return toxicPets.value.filter(
      (plant) =>
        plant.plantName.toLowerCase().indexOf(search.value.toLowerCase()) !=
        -1
    );
  }

  return documents.value.filter((plant) => {
    return (
      plant.plantName.toLowerCase().indexOf(search.value.toLowerCase()) !=
      -1
    );
  });
});

Answer 1

天哪，我自己想出来的。

我的解决方案现在比我在 OP 中使用的解决方案简单得多，并且给出了预期的结果。查看 gif 以了解它现在是如何工作的。

gif - https://imgur.com/mY8XksT

这是我想出的代码。

    //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.
      });
    });

VUE3 复合过滤器未按预期工作

VUE3 compounding filters not working as intended

javascript

vue.js

filter

vue-composition-api