用Vue js计算数组中某个类别的过滤项的长度答案

【问题标题】：Count length of filtered items of a certain category in an array with Vue js用Vue js计算数组中某个类别的过滤项的长度
【发布时间】：2020-06-16 09:30:51
【问题描述】：

我有一个如下所示的数组：

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

我知道我可以像这样<div>{{ getfilteredData.length }}</div> 获得数组的length。

但是如何计算某个category的item长度呢？

更新：

我设法显示了一个类别length，并结合了有源过滤器。这是结果的sandbox。

但现在我只为category === 'tennis' 定义了它。如何结合此方法，使其独立显示所有 3 个类别的 length？

更新 2： 我设法使用方法（感谢 Mohammed 的回答）而不是使用计算属性来做到这一点。使用方法可以传递参数。

【问题讨论】：

blogs.filter(({category}) => category === 'whatever').length
@Robby Cornelissen 抱歉，我还不明白。在我的示例中如何使用它？

标签： arrays vuejs2 count

【解决方案1】：

你仍然应该使用计算，因为如果你让它返回一个包含每个类别计数的对象，则不需要传递参数，而是将类别指定为对象键。使用计数返回对象的方法是使用reduce。通过使用计算，该函数只有在它所依赖的数据发生变化时才会再次执行，而不是花费每次调用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']

【讨论】：

【解决方案2】：

你可以用这个方法：

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

【讨论】：