How to get multiple GET API data responses from Laravel using VueJS and Axios
P粉729198207
P粉729198207 2023-08-29 21:33:50
0
1
386

这是我的Laravel Controller Assessment:

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', 'registrant.name', '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 = [ 'messages' => 'OR Sinema XI registrant data', 'valuedata' => $assessment1, 'subcriteria' => $subcriteria, 'criteria' => $criteria ]; return response()->json($response, Response::HTTP_OK); }

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

{"message":"Register 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} ],"subcriteria":[ {"sub_criteria":"Responsibility","weight":40}, 1999 . {"sub_criteria":"Keaktifan","bobot":30}, {"sub_criteria":"Teamwork","bobot":30}, {"sub_criteria":"Children","bobot":1}, {"sub_criteria":"Tes Bakat","bobot":1} ],"criteria":[ {"id_k1":1,"criteria":"Forum Group Discussion","bobot":33.3}, {"id_k1":2,"criteria":"Children","bobot":33.3}, {"id_k1":3,"criteria":"Tes Bakat","bobot":33.3} ]}

install VueJS“peniliaian”index.vue keypad:

  

但是VueJS出现了错误:

D:\Technolife\Coding\spk-or-as-client\src\views\penilaian1\index.vue:20 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'datanilai')

问题是,我如何正确地通过VueJS Axios调用多个API响应,例如'datanilai','subkriteria'和'kriteria'?当我定义单个响应,例如'data'(之前的'datanilai'的名称),它可以正常运行。

P粉729198207
P粉729198207

reply all (1)
P粉697408921

You have assignedresult.data.datanilaitopenilaian1. See the following code:

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

You should be able to write the loop like this (removing.datanilai):

 {{ penilaian.nim }} {{ penilaian.nama }} {{ penilaian.gender }}  
Show

By the way:v-for="subkriteria in subkriteria"Is it really effective? I would use different variable names likev-for="sk in subkriteria":

 {{ sk.sub_kriteria }}
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template
    About us Disclaimer Sitemap
    php.cn:Public welfare online PHP training,Help PHP learners grow quickly!