Подсчитать длину отфильтрованных элементов определенной категории в массиве с Vue js

Question

У меня есть массив, который выглядит так:

{
  "blogs": [
    {
      "id": 1,
      "name": "Test title 1",
       "category": "tennis",
    },
    {
      "id": 2,
      "name": "Test titel 2",
      "category": "football",
    },
    // etc
}

Я знаю, что могу получить length такого массива <div>{{ getfilteredData.length }}</div>.

Но как мне посчитать длина элементов определенного category?

Обновление:

Мне удалось показать категорию length в сочетании с активными фильтрами. Вот песочница результата.

Но теперь я определил его только для category === 'tennis'. Как объединить этот метод, чтобы он независимо отображал length всех 3 категорий?

Обновление 2: Мне удалось это сделать с помощью метода (спасибо к ответу Мохаммеда) вместо использования вычисляемого свойства . С помощью методов вы можете передавать параметры.

Answer 1

Вы все равно должны использовать вычисляемый, потому что, если он у вас возвращает объект со счетчиками для каждой категории, нет необходимости передавать параметр, а вы указываете категорию как ключ объекта. И способ вернуть объект со счетчиками - использовать reduce. При использовании computed функция запускается снова только в том случае, если данные, на которые она опирается, изменяются, вместо того, чтобы каждый раз обходиться с вызовом filter, доступ к объекту становится в сотни раз быстрее (однажды я сделал для этого jsperf)

  computed: {
      categoryCount: function() {
          return blogData.blogs.reduce((catCount, blogData) => {
              catCount[blogData.category] = catCount[blogData.category] || 0;
              catCount[blogData.category]++
              return catCount;
          }, {})
      }
    }

    // USAGE: categoryCount['tennis']

Answer 2

вы можете использовать этот метод:

getLengthofaCategory(cat){
  var categoryLength = blogs.filter((item) => item.category == cat);
  return categoryLength.length;
}