Vue中如何将脚本中的列表数据渲染至模板？——关联MySQL专业表与学院表数据展示问题

我来帮你解决这个问题，你的核心痛点是用单个inputText变量无法对应多个专业的学院名称，而且原计算属性的逻辑也存在循环覆盖、无返回值的问题。下面给你两种实用的解决方案：

方法一：通过计算属性生成带学院名称的专业数组 #

这种方式会把每个专业和对应的学院名称整合到新数组里，模板渲染更直观：

1. 修改计算属性 #

替换你原来的filterFaculty，新增一个返回处理后专业数组的计算属性：

computed: {
  majorsWithFaculty() {
    // 遍历每个专业，匹配对应的学院名称
    return this.majors.map(major => {
      // 根据专业的学院编码找到对应学院
      const matchedFaculty = this.faculties.find(faculty => faculty.faculty_code === major.major_faculty);
      // 返回包含学院名称的新对象，保留原专业属性
      return {
        ...major,
        facultyName: matchedFaculty ? matchedFaculty.faculty_name : '-'
      };
    });
  }
}

2. 模板渲染 #

假设你是在表格中循环展示专业，直接遍历处理后的数组即可：

<table>
  <!-- 确保学院数据加载完成后再渲染，避免初始无匹配 -->
  <tr v-for="major in majorsWithFaculty" :key="major.major_id" v-if="faculties.length">
    <td>{{ major.major_name }}</td>
    <td>{{ major.facultyName }}</td> <!-- 这里就是对应学院名称 -->
    <td>{{ major.major_status }}</td>
    <!-- 其他列 -->
  </tr>
</table>

方法二：写一个方法动态获取学院名称 #

如果不想修改原数组，也可以直接在模板中调用方法匹配：

1. 添加匹配方法 #

在methods中新增一个根据编码找学院名称的方法：

methods: {
  getFacultyName(facultyCode) {
    const targetFaculty = this.faculties.find(f => f.faculty_code === facultyCode);
    return targetFaculty ? targetFaculty.faculty_name : '-';
  },
  // 你的其他方法：fetchFaculties、fetchMajors...
}

2. 模板调用 #

在循环专业的地方直接调用这个方法：

<table>
  <tr v-for="major in majors" :key="major.major_id" v-if="faculties.length">
    <td>{{ major.major_name }}</td>
    <td>{{ getFacultyName(major.major_faculty) }}</td>
    <td>{{ major.major_status }}</td>
  </tr>
</table>

额外注意点 #

• 记得用v-if="faculties.length"判断学院数据是否加载完成，避免页面初始时因为faculties为空导致匹配不到学院的情况
• 检查fetchMajors中用到的currentEntries和pagination变量是否在data中已定义，避免控制台报错

内容的提问来源于stack exchange，提问作者TrJoke