So erhalten Sie mit VueJS und Axios mehrere GET-API-Datenantworten von Laravel

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',
            'Registrantenname',
            '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 = [
            'Nachricht' => „ODER Sinema XI-Registrantendaten“,
            'valuedata' => $assessment1,
            'Unterkriterien' => $Unterkriterien,
            'Kriterien' => $kriterien
        ];
        return Response()->json($response, Response::HTTP_OK);
    }</code>

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

<code>{"message="Daten registrieren",
"Messwert":[
{"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}

],"Unterkriterien":[
{"sub_criteria": "Verantwortung", "Gewicht": 40},
{"sub_kriteria": "Keaktifan", "bobot":30},
{"sub_kriteria": "Teamarbeit", "bobot":30},
{"sub_kriteria": "Wawancara", "bobot":1},
{"sub_kriteria": "Tes Bakat", "bobot":1}

],"Kriterien":[
{"id_k1":1,"kriteria"Forum Gruppendiskussion","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>
<Vorlage>
    <div class="container my-5">
        <div class="row justify-content-center">
            <div class="class col-12">
                <div class="card abgerundeter schatten">
                    <div class="card-header">
                        Datenpendaftar
                    </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>
Axios aus 'Axios' importieren
{onMounted, ref} aus 'vue' importieren

Standard exportieren {


    
    aufstellen() {
        // Zustand reaktivieren
        let penilaian1, subkriteria, kriteria = ref([])

        onMounted(() => {
            //Daten vom API-Endpunkt abrufen
            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)
            });
        });
        zurückkehren {
            penilaian1, Unterkriterien, Kriterien
        }
    }

}
</script></code>

但是VueJS出现了错误:

D:TechnolifeCodingspk-or-as-clientsrcviewspenilaian1index.vue:20 Nicht abgefangen (im Versprechen) TypeError: Eigenschaften von undefiniert können nicht gelesen werden (liest „datanilai“)< /pre>
如'data' (之前的'datanilai'的名称），它可以正常运行.
            

Answer 1

您已经将result.data.datanilai分配给了penilaian1。请参见以下代码：

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

您应该可以像这样编写循环（删除.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>

顺便说一句：v-for="subkriteria in subkriteria"真的有效吗？我会使用不同的变量名，比如v-for="sk in subkriteria"：

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