Vue JS 如何在select下拉菜单每个选项旁显示对应结果数量

问题核心 #

你当前的写法存在两个问题：

1. 全局共用同一个resultFees计算属性，没有针对每个选项的fee值做单独统计，所有选项都会显示同一个数值
2. 计算属性内部的filter逻辑错误，过滤条件直接返回this.uniqueFees，没有关联具体的fee值，统计结果是整个results数组的长度，和单个选项无关

解决方案 #

方案1：方法调用（适合数据量较小的场景） #

直接新增一个统计单个fee对应数量的方法，在模板遍历每个option时传入当前fee调用即可。

1. 新增方法：

methods: {
  getFeeCount(fee) {
    return this.results.filter(item => item.fee === fee).length
  }
}

2. 修改模板option部分代码：

<option v-for="fee in uniqueFees" :key="fee" :value="fee">
  {{ fee }} ({{ getFeeCount(fee) }})
</option>

方案2：预计算映射表（适合数据量较大的场景，性能更优） #

用计算属性提前生成所有fee对应的数量映射表，利用computed的缓存特性避免重复遍历数组。

1. 替换原有的resultFees计算属性：

computed: {
  feeCountMap() {
    const countMap = {}
    this.results.forEach(item => {
      const currentFee = item.fee
      countMap[currentFee] = (countMap[currentFee] || 0) + 1
    })
    return countMap
  }
}

2. 修改模板option部分代码：

<option v-for="fee in uniqueFees" :key="fee" :value="fee">
  {{ fee }} ({{ feeCountMap[fee] || 0 }})
</option>

|| 0是为了处理没有对应结果的fee，避免显示undefined。

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