Vue中如何关联不同API接口的表ID以显示对应门店名称？

首先你得先获取所有门店数据，而不是单条，然后把门店数据转成一个以store_id为键的映射对象，这样就能快速通过用户的store_id匹配到对应的门店名称了。

修正后的代码示例： #

模板部分：

<tbody>
  <tr v-for="user in users" :key="user.id"> <!-- 必须加key，符合Vue列表渲染规范 -->
      <td>{{ user.id }}</td>
      <td>{{ user.name }}</td>
      <td>{{ getStoreName(user.store_id) }}</td>
  </tr>
</tbody>

Script部分：

<script setup>
// 获取完整用户列表
const { data: users } = await useFetch('/api/users')

// 获取所有门店数据，无需拼接单个id
const { data: stores } = await useFetch('/api/stores')

// 将门店数据转换为映射表，方便快速查找：{ store_id: 门店名称 }
const storeMap = {}
if (stores.value) {
  stores.value.forEach(store => {
    storeMap[store.store_id] = store.name // 若接口返回的名称字段不是name，自行替换成实际字段名
  })
}

// 根据store_id返回对应门店名称，无匹配时返回默认提示
const getStoreName = (storeId) => {
  return storeMap[storeId] || '未知门店'
}
</script>

补充说明： #

• v-for必须绑定唯一key属性，避免Vue渲染时出现复用错误。
• 若门店接口返回的名称字段不是name（比如store_name），记得同步修改storeMap里的赋值字段。
• 默认提示文本可以根据业务需求调整，比如空字符串或者"未关联门店"。

内容的提问来源于stack exchange，提问作者BrunoSilva