Cara mendapatkan berbilang respons data API GET daripada Laravel menggunakan VueJS dan Axios

Question

这是我的Penilaian Pengawal Laravel：

<code>indeks fungsi awam()
    {
        //
        $assessment1 = AssessmentStage1::join('participant_t1', 'value_t1.nim', '=', 'participant_t1.nim')
        ->sertai('pendaftar', 'peserta_t1.nim', '=', 'pendaftar.nim')
        ->sertai('sub_kriteria_t1', 'value_t1.id_sk1', '=', 'sub_criteria_t1.id_sk1')
        ->sertai('kriteria_t1', 'sub_kriteria_t1.id_k1', '=', 'kriteria_t1.id_k1')
        ->dapatkan([
            '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')
        ->dapatkan([
            'sub_criteria_t1.sub_criteria',
            'sub_criteria_t1.weight',
                    ]);
        $criteria = CriteriaStage1::semua();
        $respon = [
            'mesej' => 'ATAU data pendaftar Sinema XI',
            'valuedata' => $penilaian1,
            'subkriteria' => $subkriteria,
            'kriteria' => $kriteria
        ];
        return response()->json($response, Response::HTTP_OK);
    }</code>

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

<code>{"message":"Daftar 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}

],"subkriteria":[
{"sub_criteria":"Tanggungjawab","weight":40},
{"sub_kriteria":"Keaktifan","bobot":30},
{"sub_kriteria":"Kerja Berpasukan","bobot":30},
{"sub_kriteria":"Wawancara","bobot":1},
{"sub_kriteria":"Tes Bakat","bobot":1}

],"kriteria":[
{"id_k1":1,"kriteria":"Forum Perbincangan Kumpulan","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页面的代码：

import axios daripada 'axios'
import {onMounted, ref} daripada 'vue'

eksport lalai {


    
    persediaan() {
        // mengaktifkan semula keadaan
        biarkan penilaian1, subkriteria, kriteria = ref([])

        onMounted(() => {
            //dapatkan data dari titik akhir API
            axios.get('http://127.0.0.1:8000/api/penilaian1')
            .then((hasil) => {
                penilaian1.nilai = hasil.data.datanilai,
                subkriteria.value = hasil.data.subkriteria,
                kriteria.nilai = hasil.data.kriteria
            }).tangkap((err) => {
                console.log(err.response)
            });
        });
        kembali {
            penilaian1, subkriteria, kriteria
        }
    }

}




但是VueJS出现了错误：
D:TechnolifeCodingspk-or-as-clientsrcviewspenilaian1index.vue:20 Uncaught (in promise) TypeError: Tidak boleh membaca sifat undefined (membaca 'datanilai')< /pra>
问题是，我如何正确地通过VueJS Axios调用多个API响应，例如'datanilai'，'subkriteria'和'kriteria'（个录应例如'data'（之前的'datanilai'的名称），它可以正常运行。

Answer 1

Anda sudah result.data.datanilai分配给了penilaian1. Lihat kod di bawah:

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

Anda sepatutnya boleh menulis gelung seperti ini (alih keluar .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"真的有效吗？我会使用不同的变量名，比如v-for="sk in subkriteria":

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