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

Question

所以我尝试使用多个过滤器选项来过滤结果。我尝试了很多不同的方法，只应用了2个过滤器就可以正常工作，但如果我在搜索中应用3个或更多的过滤器，就会在搜索中添加更多不符合所有标准的结果。

这意味着应用的滤波器越多，结果应该提炼得越窄。

这是一张gif图，展示了发生的事情。https://i.stack.imgur.com/I6Hhx.jpg

这是我目前正在使用的代码。它的膨胀超出了地狱，因为我不得不认为有一种更简单的方法可以通过复合过滤器来实现这一点。另外，如果我想添加更多的过滤器选项，这种做法会很快变得过于复杂。请告诉我有一个更简单的方法来做这个哈哈。

我正在使用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://i.stack.imgur.com/x3d4h.jpg

这是我想出的代码。

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