考虑以下产品阵列:
[
{
"ID": 1,
"Fuel Source": "Wood",
"Type": "Freestanding",
"Model": "F1150",
"Catalytic": "No",
"Maximum BTU's Per Hour": 55000,
"Higher Heating Value Efficiency (HHV)": 0.7,
"Lower Heating Value Efficiency (LHV)": 0.75,
"Steady-State Efficiency": "n/a",
"Link To Unit": "http://www.regency-fire.com/en/Products/Wood/Wood-Stoves/F1150",
"Key Features": "Large fire viewing area, with heat radiating ceramic glass\nWood-finished handle\nHeavy duty cast hinges that will never bend or break\nSolid forged steel adjustable cam lock ensures a tight door seal over time\nFront mounted air adjustment\nAir operating safety tool\nHigh performance brick-lined firebox reflects heat\nNon-obtrusive air wash curtain keeps glass clean\nHeavy gauge steel log retainers to stop logs from rolling\nWelded ash lip will never bend or break\nRear heat deflector allowing for closer clearances\nMobile home and alcove approved\nDual-burn design creates longer and more complete burns\nBacked by the industry’s most comprehensive Limited Lifetime Warranty",
"Product Size": "Small",
"Maximum Log Size": "18\"",
"Burn Time*": "Up to 8 hours",
"Firebox Capacity": "1.3 cu. ft.",
"Hopper Size": "n/a",
"Emissions (g/hr)": "1.7 g/hr",
"View Area": "126 sq. in.",
"Exhaust Size": "6\"",
"Minimum Fireplace Opening (W x H x D)": "n/a",
"Fireplace Dimensions (W x H x D)": "24\" x 32-3/16\" x 20\"",
"Picture Name": "F1150.jpg",
"Feature Sheet File Name": "F1150 Feature Sheet.pdf",
"Description": "The Regency Classic Small Wood Stove is perfect for smaller spaces, or for those needing to supplement their current heating system. It's compact footprint does not disappoint in heating capacity; burning efficiently, and extracting all the heat possible from one load of wood. Turn down your furnace and save money with this Regency small wood stove.",
"Teaser": "A perfect fit for smaller rooms. This small non-catalytic wood stove, comes with your choice of pedestal or legs and it is available in black or with nickel accents.",
"Additional Picture Name #1": "F1150-B.jpg",
"Pricing Reference Name": "001-915"
},
{
"ID": 2,
"Fuel Source": "Wood",
"Type": "Freestanding",
"Model": "F2450",
"Catalytic": "No",
"Maximum BTU's Per Hour": 75000,
"Higher Heating Value Efficiency (HHV)": 0.733,
"Lower Heating Value Efficiency (LHV)": 78.4,
"Steady-State Efficiency": "n/a",
"Link To Unit": "http://www.regency-fire.com/en/Products/Wood/Wood-Stoves/F2450",
"Key Features": "Large fire viewing area, with heat radiating ceramic glass\nWood-finished handle\nHeavy duty cast hinges that will never bend or break\nSolid forged steel adjustable cam lock ensures a tight door seal over time\nFront mounted air adjustment\nAir operating safety tool\nHigh performance brick-lined firebox reflects heat\nNon-obtrusive air wash curtain keeps glass clean\nWelded ash lip will never bend or break\nRear heat deflector allowing for closer clearances\nMobile home and alcove approved\nDual-burn design creates longer and more complete burns\nBacked by the industry’s most comprehensive Limited Lifetime Warranty",
"Product Size": "Medium",
"Maximum Log Size": "18\"",
"Burn Time*": "Up to 10 hours",
"Firebox Capacity": "2.3 cu. ft.",
"Hopper Size": "n/a",
"Emissions (g/hr)": "2.3 g/hr",
"View Area": "161 sq. in.",
"Exhaust Size": "6\"",
"Minimum Fireplace Opening (W x H x D)": "n/a",
"Fireplace Dimensions (W x H x D)": "24\" x 36-5/16\" x 27-3/16\"",
"Picture Name": "F2450.jpg",
"Feature Sheet File Name": "F2450 Feature Sheet.pdf",
"Description": "The Regency Classic Medium Wood Stove provides the perfect amount of heat for most spaces. Load wood in this stove front to back or side to side for the optimum convenience. Backed by our Limited Lifetime Warranty, we are confident that the quality workmanship, finest materials and durable construction of all Regency products, will serve your family for years to come.",
"Teaser": "The F2450 is a Medium non-catalytic wood stove, comes with your choice of pedestal or legs and it is available in black or with nickel accents.",
"Additional Picture Name #1": "F2450-B.jpg",
"Additional Picture Name #2": "F2450-C.jpg",
"Pricing Reference Name": "001-946"
}
]
我目前正在循环这个数组来显示我所有的产品。然而,我的商店我已经添加了一个过滤器阵列,使其更容易浏览。我的filters数组有三个过滤器(fuel、form和size),最初是使用this加载的,它使用我的products数组从product数组中获取这三个字段的唯一值:
const setFilters = () => {
filters.value = [
{
id: 'Fuel Source',
name: 'Fuel Type',
options: [...new Set(products.value.map(item => item["Fuel Source"]))].map((item) => ({ value: item, label: item, checked: false }))
},
{
id: 'Type',
name: 'Form Factor',
options: [...new Set(products.value.map(item => item["Type"]))].map((item) => ({ value: item, label: item, checked: false }))
},
{
id: 'Product Size',
name: 'Size',
options: [...new Set(products.value.map(item => item["Product Size"]))].map((item) => ({ value: item, label: item, checked: false }))
},
];
return array;
};
const activeFilters = computed(() => {
let array = [];
filters.value.forEach(function(entry){
entry.options.forEach(function(childEntry) {
if(childEntry.checked == true)
{
array.push(childEntry);
}
});
});
return array;
})
这个滤波器阵列是商店盒子上的三组无线电盒子的v模型。因此,如果用户检查燃料类型木材,则过滤器阵列更新该过滤器。我的问题是,我试图创建一个计算属性,以生成一个数组的产品,应显示在页面上。如果没有选择过滤器,那么只返回所有产品数组,但如果有一个过滤器(即,activeFilter >0),那么它应该确保显示的产品包含所有过滤器。我不知道如何以有效的方式进行过滤器的交叉。这就像我应该循环通过每个产品,并检查它是否再次检查过滤器数组中的每个选项,但我想不出如何写出来干净,而不循环内循环。
const filteredProducts = computed(() => {
if (activeFilters.length == 0){
return products.value
} else {
let productsToShow = [];
products.value.forEach(function(product){
let criteria = [];
filters.value.forEach(function(filter){
filter.options.forEach(function(option){
if(option.checked == true){
if(product[filter.name] != option.value){
//did not meet this checked filter option so add failed to list
criteria.push(false)
}
}
})
})
//check if any values didnt match the filter and if not length should be 0
if(criteria.length == 0){
productsToShow.push(product)
}
});
return array;
}
});
1条答案
按热度按时间gcuhipw91#
我有个主意,但可能不是个好主意。
您可以在单击复选框时调用函数。此函数接受两个参数:第一个参数是所选过滤器的索引,第二个参数是该过滤器内产品的索引。在函数内部,检索这个元素并将其添加到列表中。