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

Posted 2023-02-22

【中文标题】VUE3 复合过滤器未按预期工作

【英文标题】：VUE3 compounding filters not working as intended

【发布时间】：2022-01-23 20:27:59

【问题描述】：

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

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

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

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

我正在使用带有组合 API 的 VUE 3。

 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
    );
  );
);

【参考方案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.
      );
    );