Vue项目中实现院系详情页对应专业数量统计的技术求助

看起来你想要统计当前选中院系对应的专业数量，而不是逐个渲染符合条件的专业～你的当前模板写法有点小问题，而且用v-for来做统计不是最佳实践，我来帮你调整一下：

问题分析 #

你现在的模板里，v-for="major in majors" 循环每个专业，但判断条件里写成了 majors.major_faculty（应该是major.major_faculty，单个专业的属性），而且你的需求是统计数量，不是渲染每个符合的专业，所以不需要用v-for来遍历显示，而是直接计算符合条件的元素总数。

最佳解决方案：使用计算属性 #

Vue的计算属性（computed）非常适合处理这种需要根据响应式数据动态计算的场景，它会自动缓存计算结果，只有依赖数据变化时才重新计算，性能更好，代码也更清晰。

修改后的代码： #

模板部分（Template）

把原来的tr替换成下面的代码，直接显示计算出来的专业数量：

<tr>
  <td>Summary: <strong>{{ matchingMajorCount }}</strong> 个专业</td>
</tr>

脚本部分（Script）

在data()后面添加computed属性，用来计算符合条件的专业数量：

data() { 
  return { 
    faculties:[], 
    majors:[], 
    form: new Form({ 
      faculty_id:'', 
      faculty_code:'', 
      faculty_name:'', 
      faculty_status: '', 
    }), 
  }; 
},
computed: {
  matchingMajorCount() {
    // 过滤出major_faculty等于当前选中院系code的专业，返回数量
    return this.majors.filter(major => major.major_faculty === this.form.faculty_code).length;
  }
},
mounted() { 
  this.fetchMajors(); 
  this.fetchFaculties(); 
}, 
// ... 你的methods部分保持不变

为什么推荐计算属性？ #

• 响应式自动更新：当majors数组或者form.faculty_code变化时，计算属性会自动重新计算数量，页面实时更新。
• 缓存机制：如果依赖的数据没有变化，计算属性会直接返回缓存的结果，比在模板里直接写表达式性能更好（模板里的表达式会每次渲染都执行一次）。
• 代码更易维护：把统计逻辑抽离到computed里，模板更简洁，逻辑也更容易修改和调试。

如果你非要在模板中直接写（不推荐） #

虽然不建议，但也可以直接在模板里使用filter和length，不过性能和可读性不如计算属性：

<tr>
  <td>Summary: <strong>{{ majors.filter(major => major.major_faculty === form.faculty_code).length }}</strong> 个专业</td>
</tr>

希望这个方案能帮到你！

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