我必须编写一个Vue Web应用程序,该应用程序将使用多个过滤器,将它们推到一个数组上,然后使用click方法,检查过滤器的数组值,以及是否有任何值与tile嵌套数组中的任何嵌套值匹配,在匹配的地方显示图块。因此,我的过滤器数组可能具有:
filters: ['cookies', 'jogging']
我的嵌套图块数组将具有:
tiles: [
{
"name": "Greg",
"food": ["cookies", "chips", "burgers"],
"activities": ["drawing", "watching movies"]
"favourite places": ["the parks", "movie theatre"]
},{
"name": "Robyn",
"food": ["cookies", "hotdogs", "fish"],
"activities": ["reading", "jogging"]
"favourite places": ["beach", "theme parks"]
},{
"name": "John",
"food": ["sushi", "candy", "fruit"],
"activities": ["writing", "planning"]
"favourite places": ["the moon", "venus"]
}
]
在上面的示例中,显示的磁贴将是Robyn,因为她喜欢cookie和慢跑。
到目前为止,我的想法是编写一个for循环,以检查嵌套数组中的值,这是我从此解决方案中获得的:
https://stackoverflow.com/a/25926600/1159683
但是,我无法仅在v-for / v-show中显示该项目而建立连接。我已经把所有的过滤器推到过滤器数组的方法了,但是当涉及到与嵌套数组匹配并根据匹配显示它们时,我很茫然。最好是我想用香草js(es5)写出来。
感谢您的帮助。
谢谢!
答案 0 :(得分:2)
computed: {
fullyMatchedTiles () {
// Matches must contain all terms from filter array
return this.tiles.filter(obj=> {
// Filter the filters to get matched count
let matchedFilters = this.filters.filter(filterItem=> {
// Check each property by looping keys
for (key in obj) {
// Only evaluate if property is an array
if (Array.isArray(obj[key])) {
// Return true if filterItem found in obj
if (obj[key].some(r=> filterItem.indexOf(r) >= 0)) {
return true
}
}
}
})
return this.filters.length === matchedFilters.length
})
},
partiallyMatchedTiles () {
// Matches must contain at least one term from filter array
// Check each object in the array
return this.tiles.filter(obj=> {
// Check each property by looping keys
for (key in obj) {
// Only evaluate if property is an array
if (Array.isArray(obj[key])) {
// Return true to the filter function if matched, otherwise keep looping
if (obj[key].some(r=> this.filters.indexOf(r) >= 0)) {
return true
}
}
}
})
},
},
对不起,不是es5。我太喜欢这些新功能了,不愿意花时间回溯5年。
有关显示在vue中返回的已过滤对象的完整示例,请检查此代码笔https://codepen.io/shanemgrey/pen/jOErWbe
我认为您描述的是在v-for中进行过滤。似乎逻辑过于复杂,无法尝试使用v-for中可用的过滤来完成它。
相反,我将通过在新的计算属性中分解数组,然后根据需要在模板中使用生成的过滤后的数组来执行此操作。