检查数组中的值是否等于另一个VueJS中的值

Question

我在一个VueJS实例中有两个数组。这些阵列显示学生可以在学校参加的课程。首先是用户参加的课程，其次是有学生参加的所有课程。

数组看起来像这样:

let mainVue = new Vue({
    el: '#mainContent',
    data: {
      myCourses: [{Course: "A"}, {Course: "B"}],
      allCourses: [{Course: "A"}, {Course: "B"}, {Course: "C"}, {Course: "A"}]
}

这两个数组都由从用户输入填充的数据组成，因此它们会随时间而变化。第一个数组是用户特定的内容（用户参加的课程），第二个数组是有人参加的所有课程的数组。

我想检查与用户参加相同课程的人数。在这种情况下，我想检查数组myCourses(课程a和b)中有多少在数组allCourses中。

换句话说，我想检查数组“myCourse”中有多少次出现在数组“allCourses”中。

Answer 1

您想要过滤在“我的课程”中出现的所有课程

allCourses.filter(course => {
   return myCourses.find(m => {
      return m.Course === course.Course
   })
}).length

Answer 2

可能是一个计算的道具适合您（检查id/课程名称交叉点）

const mainVue = new Vue({
    el: '#mainContent',
    
    data: {
      myCourses: [{Course: "A"}, {Course: "B"}],
      allCourses: [{Course: "A"}, {Course: "B"}, {Course: "C"}, {Course: "A"}],
   },
   
   computed: {
      allCoursesCounts() {
        return this.allCourses.reduce((acc, { Course }) => {
          acc[Course] = (acc[Course] || 0) + 1
          return acc
        }, {})
      },
      subscribedTo() {
        const allCoursesCounts = this.allCoursesCounts

        return this.myCourses.map(({ Course }) => ({
          courseName: Course,
          amountOfUsers: allCoursesCounts[Course] || 0,
        }))
      }
   }
});

<div id="mainContent">
    <div v-for="({ courseName, amountOfUsers }) of subscribedTo" :key='courseName'>
      <span>Course {{ courseName }} - {{ amountOfUsers }}</span>
    </div>
</div>