0

我正在使用 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，其中包含未包含在/getDivisionsAPI 中的实际部门名称（仅id_PK提供关联的属性）。

问题：我怎样才能得到每个部门的这个名字？

包含附加数据的此端点的一个示例是：我需要从上面显示的 getDivisions 数据中传递给它的参数/getDivisionNameById/{id_PK}在哪里。id_PK因此，例如，如果我传递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

4

2 回答 2

1

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

于 2021-07-27T20:50:04.307 回答
1

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

您可以在组件的已安装生命周期挂钩中调用这两个 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>
于 2021-07-27T20:51:48.677 回答