检查数组中的值是否等于另一个 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 中。换句话说，我想检查数组“allCourses”中出现了多少次数组“myCourse”。

Answer 1

可能有一个computed道具适合您（检查 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>

Answer 2

您想要过滤 myCourses 中出现的所有课程

allCourses.filter(course => {

   return myCourses.find(m => {

      return m.Course === course.Course

   })

}).length