从两个不同的来源检索数据以填充表javascript/Vue.js中的<tr>

// 使用fetch函数从第一个数据源获取数据
fetch('https://api.example.com/data1')
  .then(response => response.json())
  .then(data1 => {
    // 处理第一个数据源的数据
    // 可以使用循环生成<tr>标签并填充数据
    data1.forEach(item => {
      const tr = document.createElement('tr');
      tr.innerHTML = `
        <td>${item.name}</td>
        <td>${item.age}</td>
        // 其他<td>标签
      `;
      document.querySelector('table').appendChild(tr);
    });
  });

// 使用axios从第二个数据源获取数据
axios.get('https://api.example.com/data2')
  .then(response => {
    const data2 = response.data;
    // 处理第二个数据源的数据
    // 可以使用循环生成<tr>标签并填充数据
    data2.forEach(item => {
      const tr = document.createElement('tr');
      tr.innerHTML = `
        <td>${item.name}</td>
        <td>${item.age}</td>
        // 其他<td>标签
      `;
      document.querySelector('table').appendChild(tr);
    });
  });

<template>
  <table>
    <tr v-for="item in data1" :key="item.id">
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
      <!-- 其他<td>标签 -->
    </tr>
    <tr v-for="item in data2" :key="item.id">
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
      <!-- 其他<td>标签 -->
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      data1: [],
      data2: []
    };
  },
  mounted() {
    // 通过异步请求从第一个数据源获取数据
    fetch('https://api.example.com/data1')
      .then(response => response.json())
      .then(data1 => {
        this.data1 = data1;
      });

    // 通过异步请求从第二个数据源获取数据
    axios.get('https://api.example.com/data2')
      .then(response => {
        this.data2 = response.data;
      });
  }
};
</script>