如何在VueJS中通过Axios获取Laravel GET接口返回的多组响应数据？

错误原因&修复方案 #

1. 核心错误1：响应式变量声明错误 #

你原来的let penilaian1, subkriteria, kriteria = ref([])写法只有最后一个kriteria是响应式ref对象，penilaian1和subkriteria都是未初始化的普通变量，初始值为undefined，所以模板访问属性直接报错。
需改为每个变量单独声明ref：

const penilaian1 = ref([])
const subkriteria = ref([])
const kriteria = ref([])

2. 核心错误2：模板取值逻辑错误 #

你在axios回调中已经把result.data.datanilai直接赋值给penilaian1.value，说明penilaian1本身就是分数数组，不是包含datanilai属性的对象，模板里写v-for="(penilaian1, index) in penilaian1.datanilai"当然找不到datanilai属性。
直接遍历penilaian1即可：

<tr v-for="(item, index) in penilaian1" :key="index">

3. 其他待修复的兼容问题 #

• 后端返回的subkriteria数组中没有id_sk1字段，模板中:key="subkriteria.id_sk1"会失效，需要修改Laravel接口的subkriteria查询，把id_sk1加入查询字段：

$subkriteria = SubKriteriaTahap1::join('kriteria_t1', 'sub_kriteria_t1.id_k1', '=', 'kriteria_t1.id_k1')
->get([
    'sub_kriteria_t1.id_sk1', // 新增这行
    'sub_kriteria_t1.sub_kriteria',
    'sub_kriteria_t1.bobot',
]);

• 模板中多余的<td>{{ penilaian1.gender }}</td>，接口返回没有gender字段，建议删除。
• 接口返回的datanilai每条数据没有id字段，router-link的params:{id: penilaian1.id}会拿到空值，建议按需补充字段。

4. 优化建议：同用户数据合并 #

当前接口返回的datanilai是同一个用户对应多条子标准分数，直接遍历会出现同一个用户重复多行的问题，你可以在axios回调中对数据做合并处理，实现每个用户一行、对应多列子标准分数的效果：

axios.get('http://127.0.0.1:8000/api/penilaian1')
.then((result) => {
    subkriteria.value = result.data.subkriteria
    kriteria.value = result.data.kriteria
    // 合并同nim的用户数据
    const userMap = new Map()
    result.data.datanilai.forEach(item => {
        if (!userMap.has(item.nim)) {
            userMap.set(item.nim, {
                nim: item.nim,
                nama: item.nama,
                scores: {}
            })
        }
        userMap.get(item.nim).scores[item.id_sk1] = item.nilai
    })
    penilaian1.value = Array.from(userMap.values())
})

对应的表格行代码修改为：

<tr v-for="(user, index) in penilaian1" :key="index">
  <td>{{ user.nim }}</td>
  <td>{{ user.nama }}</td>
  <td v-for="sk in subkriteria" :key="sk.id_sk1">
    {{ user.scores[sk.id_sk1] ?? 0 }}
  </td>
  <td>
    <div class="btn-group">
      <router-link
      :to="{ name: 'penilaian1.show', params:{id: user.nim}}"
      class="btn btn-sm btn-outline-info">Show</router-link>
    </div>
  </td>
</tr>

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