VueJS 3中API返回JSON数据无法在页面渲染的问题

核心问题排查 #

你遇到的控制台能看到数据但页面无显示的情况，大概率是数据未绑定到Vue响应式属性或者模板引用路径错误导致的。

具体修复步骤 #

1. 声明响应式数据 #

在组件的data选项中提前声明存储API数据的属性，Vue仅能监听已声明的响应式属性：

export default {
  data() {
    return {
      apiResp: null // 初始化null，用于存储API返回的数据
    }
  },
  // 其他组件选项...
}

2. 正确赋值响应式数据 #

API请求成功后，将数据赋值给刚才声明的响应式属性，注意用箭头函数保证this指向组件实例：

// 示例API请求逻辑（适配你的请求场景）
async mounted() {
  try {
    // 替换成你的实际请求代码，比如axios.get()
    const coreResp = await fetch('/your-api-endpoint')
    const responseData = await coreResp.json()
    // 对应你控制台看到的coreResp.data结构
    this.apiResp = responseData.data
    console.log(this.apiResp) // 确认数据已绑定到响应式属性
  } catch (err) {
    console.error('请求失败:', err)
  }
}

3. 模板中正确渲染数据 #

模板里先判断数据是否存在（避免异步请求未完成时渲染报错），再通过正确路径引用数据：

<template>
  <div class="api-data-wrap">
    <!-- 数据未加载时显示状态 -->
    <div v-if="!apiResp">加载中...</div>
    <!-- 数据加载完成后渲染 -->
    <div v-else>
      <!-- 直接显示Message字段 -->
      <p>接口返回信息: {{ apiResp.Message }}</p>
      <!-- 打印完整JSON结构（方便调试） -->
      <pre>{{ JSON.stringify(apiResp, null, 2) }}</pre>
    </div>
  </div>
</template>

常见错误点提醒 #

• 不要直接给未声明的属性赋值：如果没在data里定义apiResp，直接this.apiResp = xxx不会触发Vue响应式更新，页面自然无变化。
• 注意this指向：如果不用箭头函数，要提前保存this（比如const self = this），否则回调里的this不是组件实例，无法完成赋值。
• 路径要匹配：你控制台的结构是coreResp.data = {Message: 'xxx'}，所以模板里要对应apiResp.Message，不要写错层级。

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