v显示嵌套数组项是否匹配过滤数组

Question

我必须编写一个Vue Web应用程序，它将使用多个过滤器，将它们推到一个数组上，然后单击一个方法，检查过滤器的数组值，以及是否有任何值与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中显示项目。我已经将所有过滤器推入过滤器数组的方法已经失效，但是当要与嵌套数组进行匹配并根据匹配结果显示它们时，我很茫然。最好是我想用vanilla js（es5）写出来。

感谢您的任何帮助。

谢谢！

Answer 1

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