<p>これは私による Laravel コントローラーの評価：</p>
<p>
<pre class="snippet-code-html lang-html prettyprint-override"><code>public function Index()
{
//
$assessment1 = AssessmentStage1::join('participant_t1', 'value_t1.nim', '=', 'participant_t1.nim')
->join('登録者', '参加者_t1.nim', '=', '登録者.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',
'登録者名',
'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 = [
'メッセージ' => 'ORシネマXI登録者データ',
'値データ' => $評価1、
'サブ基準' => $subcriteria、
'基準' => $criteria
];
return response()->json($response, Response::HTTP_OK);
}</code></pre>
</p>
<p>これは、GET API を介して AssessmentController から取得したデータの結果です。</p>
<p>
<pre class="snippet-code-html lang-html prettyprint-override"><code>{"メッセージ":"データを登録",
"値データ":[
{"ニム":2810112045,"名前":"アニサ インドラ","値":0,"id_sk1":11},
{"ニム":2810522035,"名前":"ムハンマド・ファクリ・ナウファル","値":0,"id_sk1":11},
{"ニム":2810112045,"名前":"アニサ インドラ","値":0,"id_sk1":12},
{"ニム":2810522035,"名前":"ムハンマド・ファクリ・ナウファル","値":0,"id_sk1":12},
{"ニム":2810112045,"名前":"アニサ インドラ","値":5,"id_sk1":13},
{"ニム":2810522035,"名前":"ムハンマド・ファクリ・ナウファル","値":0,"id_sk1":13},
{"ニム":2810112045,"名前":"アニサ インドラ","値":2,"id_sk1":21},
{"ニム":2810522035,"名前":"ムハンマド・ファクリ・ナウファル","値":5,"id_sk1":21},
{"ニム":2810112045,"名前":"アニサ インドラ","値":7,"id_sk1":31},
{"ニム":2810522035,"名前":"ムハンマド・ファクリ・ナウファル","値":7,"id_sk1":31}
]、"サブ基準":[
{"sub_criteria":"責任","重み":40}、1999年。
{"sub_criteria":"Keaktifan","bobot":30},
{"sub_criteria":"チームワーク","ボボット":30},
{"sub_criteria":"子供","ボボット":1},
{"sub_criteria":"テス・バカト","ボボット":1}
]、"基準"：[
{"id_k1":1,"criteria":"フォーラム グループ ディスカッション","bobot":33.3},
{"id_k1":2,"criteria":"子供","bobot":33.3},
{"id_k1":3,"基準":"テス・バカト","ボボット":33.3}
]}</code></pre>
</p>
<p>VueJS「peniliaian」index.vue キーパッドをインストールします:</p>
<p>
<pre class="snippet-code-html long-html prettyprint-override"><code><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/ view.js">
<テンプレート>
<div class="コンテナ my-5">
<div class="row justify-content-center">
<div class="クラスcol-12">
<div class="カードの丸い影">
<div class="カードヘッダー">
記録データ
</div>
<div class="カード本体">
<テーブルクラス="テーブル">
<頭>
<tr>
NIM |
<th>ナマ</th>
<th v-for="サブクリテリア内のサブクリテリア" :key="subkriteria.id_sk1">
{{ subkriteria.sub_kriteria }}</th>
</tr>
</頭>
<みんな>
<tr v-for="(penilaian1, インデックス) in penilaian1.datanilai" :key="index">
<td>{{penilaian1.nim }}</td>
<td>{{penilaian1.nama }}</td>
<td>{{penilaian1.gender }}</td>
<td>
<div class="btn-group">
<ルーターリンク
:to="{名前: 'penilaian1.show', params:{id:penilaian1.id}}"
class="btn btn-sm btn-outline-info">表示</router-link>
</div>
</td>
</tr>
</tbody>
</テーブル>
</div>
</div>
</div>
</div>
</div>
</テンプレート>
<スクリプト>
「axios」から axios をインポートします
'vue' から {onMounted, ref} をインポートします
デフォルトのエクスポート {
設定（） {
// 状態を再アクティブ化します
ペニライアン1、サブクリテリア、クリテリア = ref([])
onMounted(() => {
// APIエンドポイントからデータを取得
axios.get('http://127.0.0.1:8000/api/penilaian1')
.then((結果) => {
ペニライアン1.値 = 結果.データ.データタニライ、
subkriteria.value = result.data.subkriteria、
kriteria.value = result.data.kriteria
}).catch((err) => {
コンソールログ(エラー.応答)
});
});
戻る {
penilaian1、サブクリテリア、クリテリア
}
}
}
</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 キャッチされません (約束どおり) TypeError:未定義のプロパティを読み取ることができません (「datanilai」を読み取ります)</pre>
<p>问問題です、私はどのように正しく VueJS Axios を使用して複数の API 响应、例: 'datanilai'、'subkriteria' および 'kriteria' を使用していますか？ は正常に動作します。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
リーリーresult.data.datanilaiをpenilaian1に割り当てました。次のコードを参照してください:次のようにループを記述できるはずです (
リーリー.datanilaiを削除):ちなみに:
のような別の変数名を使用します。 リーリーv-for="subkriteria in subkriteria"本当に効果があるのでしょうか？v-for="sk in subkriteria":