How to get multiple GET API data responses from Laravel using VueJS and Axios

Question

这是我的Laravel Controller Assessment：

<code>public function index()
    {
        //
        $assessment1 = AssessmentStage1::join('participant_t1', 'value_t1.nim', '=', 'participant_t1.nim')
        ->join('registrant', 'participant_t1.nim', '=', 'registrant.nim')
        ->join('sub_criteria_t1', 'value_t1.id_sk1', '=', 'sub_criteria_t1.id_sk1')
        ->join('criteria_t1', 'sub_criteria_t1.id_k1', '=', 'criteria_t1.id_k1')
        ->get([
            'value_t1.nim',
            'registrant.name',
            't1_value.value',
            'value_t1.id_sk1'
        ]);

        $subcriteria = SubCriteriaStage1::join('criteria_t1', 'sub_criteria_t1.id_k1', '=', 'criteria_t1.id_k1')
        ->get([
            'sub_criteria_t1.sub_criteria',
            'sub_criteria_t1.weight',
                    ]);
        $criteria = CriteriaStage1::all();
        $response = [
            'messages' => 'OR Sinema XI registrant data',
            'valuedata' => $assessment1,
            'subcriteria' => $subcriteria,
            'criteria' => $criteria
        ];
        return response()->json($response, Response::HTTP_OK);
    }</code>

这是通过GET API从AssessmentController获取的数据结果：

<code>{"message":"Register data",
"valuedata":[
{"nim":2810112045,"name":"Annisa indra","value":0,"id_sk1":11},
{"nim":2810522035,"name":"Muhammad fakhri naufal","value":0,"id_sk1":11},
{"nim":2810112045,"name":"Annisa indra","value":0,"id_sk1":12},
{"nim":2810522035,"name":"Muhammad fakhri naufal","value":0,"id_sk1":12},
{"nim":2810112045,"name":"Annisa indra","value":5,"id_sk1":13},
{"nim":2810522035,"name":"Muhammad fakhri naufal","value":0,"id_sk1":13},
{"nim":2810112045,"name":"Annisa indra","value":2,"id_sk1":21},
{"nim":2810522035,"name":"Muhammad fakhri naufal","value":5,"id_sk1":21},
{"nim":2810112045,"name":"Annisa indra","value":7,"id_sk1":31},
{"nim":2810522035,"name":"Muhammad fakhri naufal","value":7,"id_sk1":31}

],"subcriteria":[
{"sub_criteria":"Responsibility","weight":40}, 1999 .
{"sub_criteria":"Keaktifan","bobot":30},
{"sub_criteria":"Teamwork","bobot":30},
{"sub_criteria":"Children","bobot":1},
{"sub_criteria":"Tes Bakat","bobot":1}

],"criteria":[
{"id_k1":1,"criteria":"Forum Group Discussion","bobot":33.3},
{"id_k1":2,"criteria":"Children","bobot":33.3},
{"id_k1":3,"criteria":"Tes Bakat","bobot":33.3}
]}</code>

install VueJS“peniliaian”index.vue keypad:

<code><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/ view.js"></script>
<template>
    <div class="container my-5">
        <div class="row justify-content-center">
            <div class="class col-12">
                <div class="card rounded shadow">
                    <div class="card-header">
                        Recording data
                    </div>
                    <div class="card-body">
                        <table class="table">
                          <thead>
                            <tr>
                              <th>NIM</th>
                              <th>Nama</th>
                              <th v-for="subkriteria in subkriteria" :key="subkriteria.id_sk1">
                                  {{ subkriteria.sub_kriteria }}</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr v-for="(penilaian1, index) in penilaian1.datanilai" :key="index">
                              <td>{{ penilaian1.nim }}</td>
                              <td>{{ penilaian1.nama }}</td>
                              <td>{{ penilaian1.gender }}</td>
                              <td>
                                <div class="btn-group">
                                  <router-link
                                  :to="{ name: 'penilaian1.show', params:{id: penilaian1.id}}"
                                  class="btn btn-sm btn-outline-info">Show</router-link>
                                </div>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import {onMounted, ref} from 'vue'

export default {


    
    setup() {
        // reactivate state
        let penilaian1, subkriteria, kriteria = ref([])

        onMounted(() => {
            //get data from API endpoint
            axios.get('http://127.0.0.1:8000/api/penilaian1')
            .then((result) => {
                penilaian1.value = result.data.datanilai,
                subkriteria.value = result.data.subkriteria,
                kriteria.value = result.data.kriteria
            }).catch((err) => {
                console.log(err.response)
            });
        });
        return {
            penilaian1, subkriteria, kriteria
        }
    }

}
</script></code>

但是VueJS出现了错误：

D:\Technolife\Coding\spk-or-as-client\src\views\penilaian1\index.vue:20 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'datanilai')

问题是，我如何正确地通过VueJS Axios调用多个API响应，例如'datanilai'，'subkriteria'和'kriteria'？当我定义单个响应，例如'data'（之前的'datanilai'的名称），它可以正常运行。

Answer 1

You have assigned result.data.datanilai to penilaian1. See the following code:

axios.get('http://127.0.0.1:8000/api/penilaian1')
  .then((result) => {
    penilaian1.value = result.data.datanilai
    // ...
  });

You should be able to write the loop like this (removing .datanilai):

<tr v-for="(penilaian, index) in penilaian1" :key="index">
  <td>{{ penilaian.nim }}</td>
  <td>{{ penilaian.nama }}</td>
  <td>{{ penilaian.gender }}</td>
  <td>
    <div class="btn-group">
      <router-link
        :to="{ name: 'penilaian.show', params:{id: penilaian.id}}"
        class="btn btn-sm btn-outline-info">Show</router-link>
    </div>
  </td>
</tr>

By the way: v-for="subkriteria in subkriteria"Is it really effective? I would use different variable names like v-for="sk in subkriteria":

<th v-for="sk in subkriteria" :key="subkriteria.id_sk1">
  {{ sk.sub_kriteria }}</th>