使用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', '=', '註冊者.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.值', '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(); $響應 = [ '消息' => '或 Sinema XI 註冊人資料', '值資料' => $評估1, '子標準' => $子標準， '標準' => $標準 ]; 回傳回應()->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":"安妮莎因德拉","value":0,"id_sk1":11}, {"nim":2810522035,"name":"穆罕默德·法赫里·納法爾","value":0,"id_sk1":11}, {"nim":2810112045,"name":"安妮莎因德拉","value":0,"id_sk1":12}, {"nim":2810522035,"name":"穆罕默德·法赫里·納法爾","value":0,"id_sk1":12}, {"nim":2810112045,"name":"安妮莎因德拉","value":5,"id_sk1":13}, {"nim":2810522035,"name":"穆罕默德·法赫里·納法爾","value":0,"id_sk1":13}, {"nim":2810112045,"name":"安妮莎因德拉","value":2,"id_sk1":21}, {"nim":2810522035,"name":"穆罕默德·法赫里·納法爾","value":5,"id_sk1":21}, {"nim":2810112045,"name":"安妮莎因德拉","value":7,"id_sk1":31}, {“nim”：2810522035，“名稱”：“穆罕默德·法赫里·納法爾”，“值”：7，“id_sk1”：31} ],"子標準":[ {"sub_criteria":"責任","權重":40}， 1999 。 {"sub_criteria":"Keaktifan","bobot":30}, {"sub_criteria":"團隊合作","bobot":30}, {"sub_criteria":"兒童","bobot":1}, {"sub_criteria":"特斯巴卡特","bobot":1} ]，「標準」：[ {"id_k1":1,"criteria":"論壇小組討論","bobot":33.3}, {"id_k1":2,"criteria":"兒童","bobot":33.3}, {"id_k1":3,"criteria":"特斯巴卡特","bobot":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"></script> <模板> <div class="container my-5"> <div class="row justify-content-center"> <div class="class col-12">

<div class="card-header"> 記錄數據

; <div class="card-body"> <表類別=“表”> <頭部> <tr> 第/第> 第<第>Nama</第> {{ subkriteria.sub_kriteria }}; </標題> <正文> <td>{{ penilaian1.nim }}</td> <td>{{ penilaian1.nama }}</td> <td>{{ penilaian1.gender }}</td> <td> <div class="btn-group"> <路由器連結 :to="{ name: 'penilaian1.show', params:{id: penilaian1.id}}" class="btn btn-sm btn-outline-info">顯示

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>