vue中如何在双重 foreach 遍历调取接口知道全部接口请求结束呢

在Vue中，当你需要在双重`v-for`循环中遍历数据并同时处理异步接口请求时，可以采用以下步骤：

1. **设置状态管理**：
使用Vue的响应式系统或者Vuex这样的状态管理库来存储接口请求的状态。例如，你可以创建一个数组来跟踪每个子级列表的加载状态。

data() {
  return {
    items: [], // 存放原始数据
    subItems: {}, // 使用对象来记录子项加载状态，如 { [index]: 'pending' }
  };
}

2. **循环内处理接口请求**：
在每次迭代中，检查子项是否已加载完成。如果没有，发起请求，并更新状态。当请求成功后，将数据添加到对应的层级。

<template>
  <ul>
    <li v-for="(parentItem, parentIndex) in items">
      {{ parentItem }}
      <ul>
        <li v-for="(subItem, subChildIndex) in getSubItems(parentIndex)" :key="subItem.id">
          {{ subItem }}
        </li>
      </ul>
    </li>
  </ul>
</template>

<script>
methods: {
  async getSubItems(parentIndex) {
    if (!this.subItems[parentIndex]) {
      const response = await fetch('your-api-url');
      const data = await response.json();
      this.items[parentIndex].subItems = data; // 将子数据关联到对应父项
      this.subItems[parentIndex] = 'loaded'; // 标记子项已加载
    } else if (this.subItems[parentIndex] === 'loading') {
      console.log('等待中...');
    }
  },
},
</script>

3. **优化用户体验**：
可以在首次请求时批量获取所有子级数据，或者使用Promise.all来并发请求。不过要注意控制请求的数量，避免一次性加载太多导致性能问题。

4. **错误处理**：
别忘了处理可能出现的错误，比如网络问题、API返回异常等。