过滤数组，如果它有一个特定的键值对答案

【问题标题】：Filter array if it has a specific key value pair过滤数组，如果它有一个特定的键值对
【发布时间】：2019-11-01 06:30:07
【问题描述】：

在 Vue-JS 中，我使用 计算属性 并希望根据键值对过滤数组，这是我的数组，其中包含对象（在 data() {} 中）：

menu_content: [
  {
    title: "Dashboard",
    icon: "dashboard",
    group: false,
  },
  {
    title: "User",
    icon: "account_circle",
    group: true,
    sub_menu_items: [
      {
        title: "Edit",
        sub_group: true,
        sub_group_items: [
          {
            title: "Admin",
            icon: "verified_user",
          },
        ],
      },
    ]
  }
]

在这个数组中，我有 group 属性，可以是 false 或 true，所以我编写了一些代码来根据这个 key-value 对作为 (在computed: {}):

haveSubGroup() {
  this.menu_content.forEach(item => {
    if (item.group)
      return item.sub_menu_items.filter(sub_item => sub_item.sub_group == true);
  });
}

如果我console.log() 上面的return 语句，它给了我一个可观察的，如果我在<template> 中使用{{ haveSubGroup }}，我什么也看不到！

【问题讨论】：

你知道你基本上打破了函数forEach的处理程序的循环，而不是返回true/false吗？
尝试使用三元组=== --> sub_item.sub_group === true
haveSubGroup 的目的是什么？这个函数应该返回布尔值还是对象数组？
实际上，我想在同一个元素上使用 v-if 和 v-for，但是 Vue 不允许这样做，然后我发现了一些东西 here，我想在sub_group 的基础上过滤sub_menu_items。如果sub_group 为真，那么haveSubGroup 将仅返回这些数组元素，以便我可以访问<template> 中的sub_group_items。
我看到了几个问题。你到底想得到什么？ sub_group === true? 所在的所有子项

标签： javascript vue.js computed-properties

【解决方案1】：

您知道您正在通过在 forEach 循环中使用 return 语句来打破循环，我为您提供了以下解决方案，希望对您有所帮助！

haveSubGroup() {
  let temp = [];
  this.menu_content.forEach(item => {
    if (item.group)
      temp.push(item.sub_menu_items.filter(sub_item => sub_item.sub_group == true));
  });
  return temp[0];
},

【讨论】：

【解决方案2】：

试试这个：

haveSubGroup() {
  this.menu_content.forEach(item => {
    return item.group && item.sub_menu_items.some(sub_item => sub_item.sub_group);
  });
}

【讨论】：

不，它只返回true。
@IsaacSuarez 您正在使用return 语句打破循环。