Comment obtenir plusieurs réponses de données API GET de Laravel à l'aide de VueJS et Axios

Question

这是我的Évaluation du contrôleur Laravel：

<code>index de fonction publique()
    {
        //
        $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')
        ->obtenir([
            'valeur_t1.nim',
            'nom du titulaire.',
            't1_value.value',
            'value_t1.id_sk1'
        ]);

        $subcriteria = SubCriteriaStage1::join('criteria_t1', 'sub_criteria_t1.id_k1', '=', 'criteria_t1.id_k1')
        ->obtenir([
            'sub_criteria_t1.sub_criteria',
            'sub_criteria_t1.weight',
                    ]);
        $criteria = CriteriaStage1::all();
        $réponse = [
            'message' => 'Données du titulaire de OR Sinema XI',
            'valuedata' => $évaluation1,
            'sous-critères' => $sous-critères,
            'critères' => $critères
        ];
        return réponse()->json($response, Response::HTTP_OK);
    }</code>

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

<code>{"message":"Enregistrer les données",
"données de valeur":[
{"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}

],"sous-critères":[
{"sub_criteria":"Responsabilité","poids":40},
{"sub_kriteria":"Keaktifan","bobot":30},
{"sub_kriteria":"Travail d'équipe","bobot":30},
{"sub_kriteria":"Wawancara","bobot":1},
{"sub_kriteria":"Tes Bakat","bobot":1}

],"critères":[
{"id_k1":1,"kriteria":"Forum de discussion de groupe","bobot":33.3},
{"id_k1":2,"kriteria":"Wawancara","bobot":33.3},
{"id_k1":3,"kriteria":"Tes Bakat","bobot":33.3}
]}</code>

这是我的VueJS« peniliaian »index.vue页面的代码：

<code><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/ vue.js"></script>
<modèle>
    <div class="conteneur mon-5">
        <div class="ligne justifier-content-center">
            <div class="classe col-12">
                <div class="ombre arrondie de la carte">
                    <div class="card-header">
                        Données Pendaftar
                    </div>
                    <div class="card-body">
                        <table class="table">
                          <tête>
                            <tr>
                              <th>NIM</th>
                              <th>Nama</th>
                              <th v-for="subkriteria in subkriteria" :key="subkriteria.id_sk1">
                                  {{ subkriteria.sub_kriteria }}</th>
                            ≪/tr>
                          ≪/tête>
                          <corps>
                            <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">
                                  <lien-routeur
                                  :to="{ nom : 'penilaian1.show', params :{id : penilaian1.id}}"
                                  class="btn btn-sm btn-outline-info">Afficher</router-link>
                                </div>
                              </td>
                            ≪/tr>
                          </tcorps>
                        </tableau>
                    </div>
                </div>
            </div>
        </div>
    </div>
</modèle>

<script>
importer des axios depuis 'axios'
importer {onMounted, ref} depuis 'vue'

exporter par défaut {


    
    installation() {
        // réactive l'état
        laissez penilaian1, sous-critères, kriteria = ref([])

        onMounted(() => {
            // récupère les données du point de terminaison de l'API
            axios.get('http://127.0.0.1:8000/api/penilaian1')
            .then((résultat) => {
                penilaian1.value = result.data.datanilai,
                subkriteria.value = result.data.subkriteria,
                kriteria.value = résultat.data.kriteria
            }).catch((err) => {
                console.log(err.response)
            });
        });
        retour {
            penilaian1, sous-critères, critères
        }
    }

}
</script></code>

但是VueJS出现了错误：

D:TechnolifeCodingspk-or-as-clientsrcviewspenilaian1index.vue:20 Non capturé (promis) TypeError : impossible de lire les propriétés d'undefined (lecture de 'datanilai')< /pré>
问题是，我如何正确地通过VueJS Axios调用多个API响应，例如 'datanilai', 'subkriteria' et 'kriteria'？当我定义单个响应，例如'data'（之前的'datanilai'的名称），它可以正常运行。

Answer 1

Vous l'avez déjà fait result.data.datanilai分配给了penilaian1. Voir le code ci-dessous :

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

Vous devriez pouvoir écrire la boucle comme ceci (supprimer .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>

Au fait :v-for="subkriteria in subkriteria"真的有效吗？我会使用不同的变量名，比如v-for="sk in subkriteria" :

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