VueJS 및 Axios를 사용하여 Laravel에서 여러 GET API 데이터 응답을 얻는 방법

Question

<p>Laravel 컨트롤러 평가:</p> <p> <pre class="snippet-code-html lang-html Prettyprint-override"><code>공개 함수 인덱스() { // $assessment1 = AssessmentStage1::join('participant_t1', 'value_t1.nim', '=', 'participant_t1.nim') ->join('등록자', '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') ->얻기([ 'value_t1.nim', '등록자.이름', 't1_값.값', 'value_t1.id_sk1' ]); $subcriteria = SubCriteriaStage1::join('criteria_t1', 'sub_criteria_t1.id_k1', '=', 'criteria_t1.id_k1') ->얻기([ 'sub_criteria_t1.sub_criteria', 'sub_criteria_t1.weight', ]); $criteria = CriteriaStage1::all(); $응답 = [ '메시지' => 'OR Cinema XI 등록자 데이터', '값데이터' => $평가1, '하위 기준' => $하위 기준, '기준' => $기준 ]; 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>{"message":"데이터 등록", "값데이터":[ {"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} ],"하위 기준":[ {"sub_criteria":"책임","가중치":40}, {"sub_kriteria":"Keaktifan","bobot":30}, {"sub_kriteria":"팀워크","bobot":30}, {"sub_kriteria":"Wawancara","bobot":1}, {"sub_kriteria":"테스 바카트","bobot":1} ],"기준":[ {"id_k1":1,"kriteria":"포럼 그룹 토론","bobot":33.3}, {"id_k1":2,"kriteria":"와완카라","bobot":33.3}, {"id_k1":3,"kriteria":"테스 바카트","bobot":33.3} ]}</code></pre> </p> <p>당신이 좋아하는 VueJS“peniliaian”index.vue页side代码:</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> <템플릿> <div class="container my-5"> <div class="row justify-content-center"> <div class="class col-12"> <div class="카드 둥근 그림자"> <div class="card-header"> 데이터펜다프타르 </div> <div class="card-body"> <테이블 클래스="테이블"> <머리> <tr> <번째> NIM <번째> 나마 <th v-for="subkriteria in subkriteria" :key="subkriteria.id_sk1"> {{ subkriteria.sub_kriteria }}</th> </tr> </머리> <본문> <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"> <라우터 링크 :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} 가져오기 기본값 내보내기 { 설정() { // 상태를 다시 활성화 penilaian1, 하위 기준, 기준 = ref([])로 설정 onMounted(() => { //API 엔드포인트에서 데이터 가져오기 axios.get('http://127.0.0.1:8000/api/penilaian1') .then((결과) => { penilaian1.value = result.data.datanilai, 하위 기준.값 = 결과.데이터.하위 기준, 기준.값 = 결과.데이터.기준 }).catch((err) => { console.log(err.response) }); }); 반품 { penilaian1, 하위 기준, 기준 } } } </script></code></pre> </p> <p>但是VueJS 판매:</p> <pre class="brush:php;toolbar:false;">D:TechnolifeCodingspk-or-as-clientsrcviewspenilaian1index.vue:20 포착되지 않음(약속 중) TypeError: 정의되지 않은 속성을 읽을 수 없습니다('datanilai' 읽기)< /pre> <p>问题是，저는 VueJS Axios调用多个API响应，例如'datanilai'，'subkriteria' and'kriteria'? name称)，它可以正常运行。</p>

Answer 1

이미 result.data.datanilai分配给了penilaian1. 아래 코드를 참조하세요:

으아악

다음과 같이 루프를 작성할 수 있어야 합니다(삭제 .datanilai):

으아악

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

으아악