VueJS 和嵌套的 v-for：如何通过每个循环获取端点数据？

Posted 2023-02-16

【中文标题】VueJS 和嵌套的 v-for：如何通过每个循环获取端点数据？

【英文标题】：VueJS and nested v-for: How to get endpoint data through each loop?

【发布时间】：2021-10-03 16:00:13

【问题描述】：

我正在使用 VUEJS 构建单页应用程序。我有一个文件组件，它从 API（使用 Axios）获取一些数据并使用 v-for 呈现如下列表：

<template>
  <div>
    <ul>
      <li v-for="division in divisions" :key="division.id_PK">
         division.c6code  - XXX
      </li>
    </ul>
  </div>
</template>

  props: 
    country: 
      type: Object,
      required: true
    
  ,
data() 
    return 
      divisions: [],
    ,
methods: 
    async getDivisions() 
      const divisions = await APIService.getDivisions(
        this.country.igpeSID_FK
      )
      this.divisions = divisions
    ,

API 数据源的示例类似于/getDivisions/800001：

  "status": 200,
  "data": [
    
      "id_PK": 205891,
      "igpeSID_FK": 800001,
      "c6code": "AB-CDE"
    ,
    
      "id_PK": 205890,
      "igpeSID_FK": 800001,
      "c6code": "FG-HIJ"
    ,
    
      "id_PK": 205889,
      "igpeSID_FK": 800001,
      "c6code": "KL-MNO"
    ,
    
      "id_PK": 205888,
      "igpeSID_FK": 800001,
      "c6code": "PQ-RST"
    ,
    
      "id_PK": 205887,
      "igpeSID_FK": 800001,
      "c6code": "WX-YZA"
    
  ]

渲染后的 UI 如下所示：

现在，还有另一个 API 端点，其中包含我需要用来代替上面显示的“XXX”占位符的其他数据。该附加数据源有一个名为 name 的属性，并包含未包含在 /getDivisions API 中的实际部门名称（仅提供了关联的属性 id_PK）。

问题：如何获得每个部门的这个名称？

包含附加数据的此端点的示例是：/getDivisionNameById/id_PK 其中id_PK 是我需要从上面显示的 getDivisions 数据传递给它的参数。因此，例如，如果我将205891 传递给/getDivisionNameById/205891，我会得到如下所示的数据：

示例/getDivisionNamesById/205891：

  "status": 200,
  "data": [
    
      "P_uniqueID": 16919,
      "isoGeoDivisionEntry_FK": 205891,
      "name": "ZABUL",
      "lang": "fa"
    ,
    
      "P_uniqueID": 16918,
      "isoGeoDivisionEntry_FK": 205891,
      "name": "ZABUL",
      "lang": "ps"
    
  ]

我在想我需要创建一个函数，以某种方式创建一个新的名称数组，然后我可以在我的原始模板中循环遍历另一个 v-for，如下所示：

<li v-for="division in divisions" :key="division.id_PK">
         division.c6code  - <span v-for="divName in divisionNames" :key="division.id_PK">divName.name</span>
      </li>

async getDivisionNameById(id_PK) 
    const name = await APIService.getDivisionNameById(id_PK)
    this.divNames.push(name)
    

显然，我不知道我在那里做什么......

带有数据的代码沙盒：

https://codesandbox.io/s/intelligent-wind-21w35?file=/src/getDivisionNamesById.json

【问题讨论】：

用组件替换li里面的内容，即<division-info :pk="division.id_PK"/>然后在组件内部做另一个API查询查找，做一堆查询并不理想，但至少如果你抽象它会延迟加载

好提醒，谢谢

@LawrenceCherone：非常感谢。这对我来说是一个简单的解决方案！

【参考方案1】：

在呈现内容之前，您必须先查询数据。 您可以在 onMounted 钩子中获取所有数据。

【讨论】：

谢谢，这是我问题的部分解决方案。

【参考方案2】：

这是一个计算属性的好地方。 根据您调用 API 的方式，根据需要编辑此示例。

您可以在组件的 mounted lifecycle-hook 中调用两个 API 端点。包括一个简单的超时来模拟不同时间传入的数据。

关于获取名称数据的辅助 API 调用：正如您已经说过的，遍历 ID 并进行 API 调用。在这种情况下，您需要等待第一次 API 调用的结果，然后使用它返回的那些 ID 进行第二次 API 调用。也许这会帮助您处理 await/asyc/then 的东西： How to use async/await in Vue.js?

<template>
  <div class="hello">
    <ul>
      <li v-for="(division, index) in fullList" :key="index">
         division 
      </li>
    </ul>
  </div>
</template>

<script>
import divisions from "@/getDivisionsEntries.json";
import divisionNames from "@/getDivisionNamesById.json";
export default 
  name: "DivisionsList",
  data() 
    return 
      divisions: divisions.data,
      divisionNames: null,
    ;
  ,
  mounted() 
    setTimeout(() => 
      this.divisions = divisions.data;
    , 1000);
    setTimeout(() => 
      this.divisionNames = divisionNames.data;
    , 3000);
  ,
  computed: 
    fullList: function () 
      let combinedArr = [];
      for (var divi of this.divisions) 
        var divNameData = this.divisionNames?.find(
          (x) => x.isoGeoDivisionEntry_FK === divi.id_PK
        );
        if (divNameData !== undefined) 
          combinedArr.push(`$divi.c6code - $divNameData.name`);
        
      
      return combinedArr;
    ,
  ,
;
</script>

【讨论】：

优秀。让我审核并回复您！

非常感谢您的帮助。我最终使用了另一种方法，但您的回答帮助我更好地理解了这个问题！