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

【问题标题】：Checking if values from an array equals values from another VueJS检查数组中的值是否等于另一个 VueJS 中的值
【发布时间】：2021-03-08 03:40:37
【问题描述】：

我在一个 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 中。

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

【问题讨论】：

标签： javascript arrays loops vue.js

【解决方案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>

【讨论】：

我不认为你可以在这里使用包含，因为它衡量的是浅平等
@KevinIzuchukwu 这就是为什么我建议比较像数组项 ID 之类的东西。可以改成深度比较的函数，我一般用lodash
这有点用。但是结果是 4，我想将结果过滤为“Course A: 2”Course B:2”。所以你可以看到每门课程的总出席人数，而不是所有课程的总人数。
@egx 我根据您的要求更改了代码。（一开始没有得到你需要的东西，抱歉:)）
谢谢你！这看起来很完美。我已将您的答案标记为已解决:-)

【解决方案2】：

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

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

【讨论】：