VUE如何关联两个表，类似于SQL的left join

在Vue.js中，可以使用computed属性来实现两个表的关联，类似于SQL的left join。

假设我们有两个数组，一个是学生数组，一个是成绩数组。学生数组包含每个学生的姓名和学号，成绩数组包含每个学生的学号和成绩。我们需要将这两个数组关联起来，得到每个学生的姓名和成绩。

可以先定义一个computed属性，使用map函数遍历学生数组，然后使用find函数在成绩数组中查找对应的学生成绩。如果找到了，就返回一个包含学生姓名和成绩的对象，否则只返回学生姓名。

代码示例：

computed: {
  studentScores() {
    return this.students.map(student => {
      const score = this.scores.find(score => score.id === student.id);
      return score ? { name: student.name, score: score.score } : { name: student.name };
    });
  }
}

在模板中，可以使用v-for指令遍历computed属性中的学生姓名和成绩。

代码示例：

<ul>
  <li v-for="student in studentScores">
    {{ student.name }} {{ student.score ? student.score : '暂无成绩' }}
  </li>
</ul>