使用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> 第/第> 第/第> {{ 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>