Vue Computed Method - поиск значений в массиве не работает

Question

У меня есть страница Vue для отображения рецептов по категориям:

<template>
  <div class="recipes-page">
    <div class="recipes" v-for="r in categoryRecipes" :key="r.id">
      <span>{{ r.title }}</span>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    loadedRecipes() {
      return this.$store.getters.loadedRecipes;
    },
    loadedCategories() {
      return this.$store.getters['categories/loadedCategories'];
    },
    categoryRecipes() {
      let categorized = [];
      this.$store.getters['categories/loadedCategories'].forEach(cat => {
        this.$store.getters.loadedRecipes.forEach(recipe => {
          if (cat.id in Object.keys(recipe.categories)) { // doesnt work
            console.log("Recipe has the category with id: " + cat.id);
            categorized.push(recipe);
          }
        });
      });
      return categorized;
    }
  }
};
</script>

В структуре данных есть категории и рецепты:

Категории:

[                                                                                                                                              
  {
    name: 'Juices',
    recipes: {
      '-L_Pg_BbwMYaGQjI2ejd': true
    },
    id: 'juices'
  },
  {
    name: 'Misc',
    recipes: {
      '-L_Pg_BbwMYaGQjI2ejd': true,
      '-L_PjcLaCvhZr9nb6wbh': true
    },
    id: 'misc'
  }
]

Рецепты:

[                                                                                                                                              
  {
    author: 'Ian K',
    categories: {
      juices: true,
      misc: true
    },
    citation: 'none',
    cookTime: 'n/a',
    created: '2019-03-08T00:27:09.774Z',
    description: 'How to make Orange Juice from frozen concentrate.',
    directions: 'Mix frozen orange juice and water in a pitcher.',
    featured: true,
    id: '-L_Pg_BbwMYaGQjI2ejd',
    prepTime: '1 min',
    starCount: 5,
    thumbnail: 'https://baconmockup.com/420/420',
    title: 'Orange Juice from Concentrate',
    totalTime: '1 min',
    updated: '2019-03-08T00:27:09.774Z',
    yield: '8 Cups'
  },

  ...
]

Проблема в том, что оператор if никогда не возвращает true, даже если cat.id существует в ключах категорий рецептов.Кто-нибудь знает, почему проверка содержимого массива ключей не работает?

Я также хотел бы знать, если подобная цепочка итераций будет иметь негативное влияние на производительность, и есть ли лучший / более удобный способ переходаоб этом?

Answer 1

Поскольку Object.keys() возвращает массив, вы, вероятно, хотите что-то вроде

if (Object.keys(recipe.categories).includes(cat.id)) {

Answer 2

Использование

if (recipe.categories[cat.id]) { 
  // ...
}

Это самый быстрый способ, так как он не проходит по каждой категории для каждого рецепта.