使用VueJS和Axios从Laravel获取多个GET API数据响应的方法
<p>这是我的Laravel PenilaianController：</p>
<p>
<pre class="snippet-code-html lang-html prettyprint-override"><code>public function index()
{
//
$penilaian1 = PenilaianTahap1::join('peserta_t1', 'nilai_t1.nim', '=', 'peserta_t1.nim')
->join('pendaftar', 'peserta_t1.nim', '=', 'pendaftar.nim')
->join('sub_kriteria_t1', 'nilai_t1.id_sk1', '=', 'sub_kriteria_t1.id_sk1')
->join('kriteria_t1', 'sub_kriteria_t1.id_k1', '=', 'kriteria_t1.id_k1')
->get([
'nilai_t1.nim',
'pendaftar.nama',
'nilai_t1.nilai',
'nilai_t1.id_sk1'
]);
$subkriteria = SubKriteriaTahap1::join('kriteria_t1', 'sub_kriteria_t1.id_k1', '=', 'kriteria_t1.id_k1')
->get([
'sub_kriteria_t1.sub_kriteria',
'sub_kriteria_t1.bobot',
]);
$kriteria = KriteriaTahap1::all();
$response = [
'message' => 'Data pendaftar OR Sinema XI',
'datanilai' => $penilaian1,
'subkriteria' => $subkriteria,
'kriteria' => $kriteria
];
return response()->json($response, Response::HTTP_OK);
}</code></pre>
</p>
<p>这是通过GET API从PenilaianController获取的数据结果：</p>
<p>
<pre class="snippet-code-html lang-html prettyprint-override"><code>{"message":"Data pendaftar",
"datanilai":[
{"nim":2810112045,"nama":"Annisa indra","nilai":0,"id_sk1":11},
{"nim":2810522035,"nama":"Muhammad fakhri naufal","nilai":0,"id_sk1":11},
{"nim":2810112045,"nama":"Annisa indra","nilai":0,"id_sk1":12},
{"nim":2810522035,"nama":"Muhammad fakhri naufal","nilai":0,"id_sk1":12},
{"nim":2810112045,"nama":"Annisa indra","nilai":5,"id_sk1":13},
{"nim":2810522035,"nama":"Muhammad fakhri naufal","nilai":0,"id_sk1":13},
{"nim":2810112045,"nama":"Annisa indra","nilai":2,"id_sk1":21},
{"nim":2810522035,"nama":"Muhammad fakhri naufal","nilai":5,"id_sk1":21},
{"nim":2810112045,"nama":"Annisa indra","nilai":7,"id_sk1":31},
{"nim":2810522035,"nama":"Muhammad fakhri naufal","nilai":7,"id_sk1":31}
],"subkriteria":[
{"sub_kriteria":"Tanggung Jawab","bobot":40},
{"sub_kriteria":"Keaktifan","bobot":30},
{"sub_kriteria":"Teamwork","bobot":30},
{"sub_kriteria":"Wawancara","bobot":1},
{"sub_kriteria":"Tes Bakat","bobot":1}
],"kriteria":[
{"id_k1":1,"kriteria":"Forum Group Discussion","bobot":33.3},
{"id_k1":2,"kriteria":"Wawancara","bobot":33.3},
{"id_k1":3,"kriteria":"Tes Bakat","bobot":33.3}
]}</code></pre>
</p>
<p>这是我的VueJS“peniliaian”index.vue页面的代码：</p>
<p>
<pre class="snippet-code-html lang-html prettyprint-override"><code><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.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">
Data Pendaftar
</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></pre>
</p>
<p>但是VueJS出现了错误：</p>
<pre class="brush:php;toolbar:false;">D:\Technolife\Coding\spk-or-as-client\src\views\penilaian1\index.vue:20 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'datanilai')</pre>
<p>问题是，我如何正确地通过VueJS Axios调用多个API响应，例如'datanilai'，'subkriteria'和'kriteria'？当我定义单个响应，例如'data'（之前的'datanilai'的名称），它可以正常运行。</p>
1
767
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
您已经将
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>