vue实现两个列表数据根据id连表查询

在Vue中实现两个列表数据根据id进行连表查询可以通过以下步骤实现：

1. 在Vue的data属性中定义两个数组，分别存储两个列表的数据，例如listA和listB。

2. 在Vue的created钩子函数中，通过ajax请求获取两个列表的数据，并将数据存储到listA和listB中。

3. 在Vue的computed属性中定义一个新的数组，用于存储连表查询后的数据，例如listC。

4. 在computed属性中使用forEach遍历listA数组，在遍历的过程中，查找listB数组中是否有相同的id，如果有，则将两个对象合并并存储到listC中。

5. 在Vue的模板中使用v-for指令循环遍历listC数组，展示连表查询后的结果。

以下是示例代码：

<template>
  <div>
    <h2>List A</h2>
    <ul>
      <li v-for="item in listA" :key="item.id">{{ item.name }}</li>
    </ul>

    <h2>List B</h2>
    <ul>
      <li v-for="item in listB" :key="item.id">{{ item.name }}</li>
    </ul>

    <h2>List C</h2>
    <ul>
      <li v-for="item in listC" :key="item.id">{{ item.name }} - {{ item.details }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listA: [],
      listB: []
    }
  },

  created() {
    // ajax请求获取listA和listB的数据
    // ...

    // 假设listA和listB的数据分别为：
    this.listA = [
      { id: 1, name: 'A1' },
      { id: 2, name: 'A2' },
      { id: 3, name: 'A3' }
    ];
    this.listB = [
      { id: 1, details: 'B1' },
      { id: 3, details: 'B3' }
    ];
  },

  computed: {
    listC() {
      const result = [];

      this.listA.forEach(a => {
        const b = this.listB.find(b => b.id === a.id);
        if (b) {
          result.push({...a, ...b});
        }
      });

      return result;
    }
  }
}
</script>