Javascript v-显示嵌套数组项是否与筛选数组匹配

我必须编写一个Vue webapp，它将接受多个过滤器，将它们推送到一个数组中，然后单击一个方法，检查过滤器数组的值，如果有任何值与tiles嵌套数组中的任何嵌套值匹配，则显示匹配的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"]
 }
]

在上面的例子中，将显示的瓷砖是罗宾，因为她喜欢饼干和慢跑

到目前为止，我的想法是编写一个for循环来检查嵌套数组中的值，这是我从这个解决方案中得到的：

但是，我无法建立仅在v-for/v-show中显示项目的连接。我已经找到了将所有过滤器推送到过滤器数组的方法，但是当涉及到将其与嵌套数组匹配并基于匹配显示它们时，我不知所措。我最好用香草js（es5）写出来

感谢您的帮助

谢谢大家!

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中返回的过滤对象的完整示例，请选中此代码笔

我想你描述的是在v-for中进行过滤。用v-for中可用的过滤功能来完成这项工作似乎太复杂了

相反，我会按照图中所示，在一个新的computed属性中分解数组，然后在模板中随意使用得到的过滤数组

对不起，不是es5。我太喜欢这些新功能了，不想花时间回到5年前

有关显示vue中返回的过滤对象的完整示例，请选中此代码笔

我想你描述的是在v-for中进行过滤。用v-for中可用的过滤功能来完成这项工作似乎太复杂了

---

相反，我会按照图中所示，在一个新的computed属性中分解数组，然后在模板中随意使用得到的过滤数组

嘿，非常感谢，我已经成功地将其输入我的应用程序并开始工作，但是它同时返回Greg和Robyn，理想情况下，我希望它的工作方式是，如果它只过滤“cookies”，它将同时显示Greg和Robyn，但如果它进一步过滤“cookies”和“jogging”，它将只显示Robyn，因为她是唯一一个喜欢这两个对象的人。我将您的第一段解释为“如果任何值与tiles嵌套数组中的任何嵌套值匹配，则显示匹配的tiles”，意思是您希望包含任何匹配的对象。根据这条评论，我添加了一个新函数，以确保所有过滤器字符串都与要包含的任何特定对象匹配嘿，伙计，非常感谢你，这正是我想要的，它完全按照预期工作！很高兴听到！谢谢你让我知道。：-）嘿，非常感谢，我已经成功地将其输入我的应用程序并开始工作，但是它同时返回Greg和Robyn，理想情况下，我希望它的工作方式是，如果它只过滤“cookies”，它将同时显示Greg和Robyn，但如果它进一步过滤“cookies”和“jogging”，它将只显示Robyn，因为她是唯一一个喜欢这两个对象的人。我将您的第一段解释为“如果任何值与tiles嵌套数组中的任何嵌套值匹配，则显示匹配的tiles”，意思是您希望包含任何匹配的对象。根据这条评论，我添加了一个新函数，以确保所有过滤器字符串都与要包含的任何特定对象匹配嘿，伙计，非常感谢你，这正是我想要的，它完全按照预期工作！很高兴听到！谢谢你让我知道。：-）