Vue中如何从循环返回计算属性的多个独立值？

核心问题分析 #

你当前的computed属性里，在第一个分类的循环中就执行了return newArray.length，导致函数直接终止，只能返回第一个分类的选中计数，无法生成所有分类的统计数组。另外原有代码的嵌套循环和map的使用逻辑冗余，没必要创建selected-i的对象，直接统计选中数量即可。

修正后的模板代码 #

把原来<span>标签里的v-for去掉，直接根据当前分类的index获取对应的统计值：

<div class="search-filters__group-category" v-on:click="toggleFilterAccordion(index)"
  :aria-expanded="isAccordionOpen.includes(index)"
  :aria-controls="`collapse-${facetGroup.name.replace(' ', '')}`">
  <h3 class="header header--4"> 
    {{facetGroup.name}}
    <span>({{ numSelectedFacetsDisplayPerType[index] }})</span>
  </h3>                        
</div>

修正后的computed属性代码 #

简化逻辑，直接遍历每个分类，统计其下选中的复选框数量，返回一个对应长度的数组：

numSelectedFacetsDisplayPerType: {
  get: function() {
    const facets = store.state[this.moduleGroup].facets;
    // 遍历每个分类，统计该分类下选中的数量
    return facets.map(facet => {
      return facet.values.filter(item => item.selected === true).length;
    });
  }
}

逻辑说明 #

1. 用Array.map遍历所有分类（facets数组），每个分类对应一个统计值
2. 对每个分类的values数组，用Array.filter筛选出selected为true的项，再取其长度就是该分类的选中数量
3. 最终返回的数组，索引和分类的索引一一对应，模板中通过index即可获取对应分类的统计数

内容的提问来源于stack exchange，提问作者elkefreed