检查数组中的值是否等于另一个 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({&nbsp; &nbsp; el: '#mainContent',&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; myCourses: [{Course: "A"}, {Course: "B"}],&nbsp; &nbsp; &nbsp; allCourses: [{Course: "A"}, {Course: "B"}, {Course: "C"}, {Course: "A"}],&nbsp; &nbsp;},&nbsp; &nbsp;&nbsp; &nbsp;computed: {&nbsp; &nbsp; &nbsp; allCoursesCounts() {&nbsp; &nbsp; &nbsp; &nbsp; return this.allCourses.reduce((acc, { Course }) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; acc[Course] = (acc[Course] || 0) + 1&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return acc&nbsp; &nbsp; &nbsp; &nbsp; }, {})&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; subscribedTo() {&nbsp; &nbsp; &nbsp; &nbsp; const allCoursesCounts = this.allCoursesCounts&nbsp; &nbsp; &nbsp; &nbsp; return this.myCourses.map(({ Course }) => ({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; courseName: Course,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; amountOfUsers: allCoursesCounts[Course] || 0,&nbsp; &nbsp; &nbsp; &nbsp; }))&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp;}});<div id="mainContent">&nbsp; &nbsp; <div v-for="({ courseName, amountOfUsers }) of subscribedTo" :key='courseName'>&nbsp; &nbsp; &nbsp; <span>Course {{ courseName }} - {{ amountOfUsers }}</span>&nbsp; &nbsp; </div></div>

Answer 2

您想要过滤 myCourses 中出现的所有课程allCourses.filter(course => {&nbsp; &nbsp;return myCourses.find(m => {&nbsp; &nbsp; &nbsp; return m.Course === course.Course&nbsp; &nbsp;})}).length