Фильтровать массив, если он имеет определенную пару значений ключа

Question

В 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, поэтому я написал некоторый код для фильтрации на основе этого значения ключа пара как (в 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, он дает мне наблюдаемый , и если я использую {{ haveSubGroup }} в <template> ничего не вижу!

Answer 1

Вы знаете, что разрываете цикл, используя оператор return в цикле forEach, у меня есть для вас следующее решение, надеюсь, оно поможет!

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];
},

Answer 2

Попробуйте это:

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