Как отфильтровать свойства объекта в Vuejs

Question

У меня есть два набора данных: категории и продукты.Я хотел бы отфильтровать товары по категории, к которой они принадлежат.

Мне нужно отфильтровать по category.name, потому что имя может быть равно product.category.Я знаю, что точка нации не принимается в качестве параметра функции, но я не могу найти способ ее передачи.

Я пробовал: category ["name"] и {{category.name}} без успеха.

<b-tab v-for="category in categories" v-bind:title="category.name" :key="category.id">
<div v-for="product in filteredByCategory(category.name)" :key="product.id" class="slide">
  <b-card
    v-bind:title="product.name"
    :img-src="product.imageUrl"
    style="min-width: 15rem; max-width: 15rem;"
   >
</b-card>

Это фильтр, который я использую.

filteredByCategory(category){
      return this.products.filter(product => product.category === category.name)
    }

Может кто-нибудь помочь, пожалуйста

Answer 1

Вы передаете имя уже здесь:

filteredByCategory(category.name)

Но затем попробуйте снова обратиться к свойству name в функции фильтра.

product.category === category.name

Измените одну из этих строк

1. Передать объект категории в - filteredByCategory(category)
2. Или вместо этого проверить категорию product.category === category

Answer 2

Точечная запись фактически принимается с ES6

function({ propHere })

, за исключением того, что я вижу, что вы уже передали category.name в функцию filteredByCategory, но вы по-прежнемуиспользуя category.name.Таким образом, он становится похожим на 'clothing'.name', который не определен, потому что у прототипа строки такой метод отсутствует.