Vue页面数据不显示排查：API返回数据但v-for循环无内容

核心错误点 #

你用computed属性直接返回异步方法fetchData的结果，这是行不通的——因为异步方法返回的是Promise对象，不是你需要的数组数据，v-for遍历Promise自然渲染不出内容。computed属性是同步计算的，无法处理异步逻辑。

修正方案 #

1. 在data中定义响应式变量
   先在组件的data里声明一个用来存储最终数组的变量：

   data() {
     return {
       secondaryData: [] // 初始化空数组
     }
   }
   

2. 调整异步逻辑的执行时机
   在组件的created钩子（或者需要触发数据加载的时机）里调用fetchData，把处理好的数据赋值给secondaryData：

   async created() {
     await this.fetchData();
   },
   methods: {
     async fetchData() {
       const res = await fetchDetails();
       // 提取以's'开头的键值对组成数组
       this.secondaryData = Object.entries(res).filter(([key]) => key.startsWith('s')).map(([label, value]) => ({ label, value }));
     }
   }
   

3. 修改模板遍历的变量
   把模板里v-for遍历的secondary改成secondaryData：

   <div v-for="item in secondaryData" :key="item.label">
     {{ item.label }}: {{ item.value }}
   </div>
   

额外说明 #

如果确实需要用computed（比如依赖其他响应式数据动态过滤），那也要先把异步获取的原始数据存在data里，再在computed中基于这个数据做同步过滤：

data() {
  return {
    rawData: null
  }
},
async created() {
  this.rawData = await fetchDetails();
},
computed: {
  secondary() {
    if (!this.rawData) return [];
    return Object.entries(this.rawData).filter(([key]) => key.startsWith('s')).map(([label, value]) => ({ label, value }));
  }
}

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