Nuxt请求API返回HTML而非JSON，仅刷新页面后数据才正常显示

1. 初始代码使用Nuxt.js的asyncData钩子时，接口返回结构为{ data: { positions:2, departments:2, paygrades:8 } }，你直接返回接口返回的完整对象，此时会将接口里的data属性合并到组件实例中，而非你预期的dbData属性，因此模板中调用$data.dbData无法获取到正确值，首次渲染出现异常，刷新后客户端重新请求才显示正常属于偶发的渲染时序问题。
2. 直接在模板中渲染JS对象，Vue默认会调用对象的toString()方法，容易出现不符合预期的渲染结果，如需展示JSON结构建议手动转为字符串。

你调整后的代码已经解决了核心的属性匹配问题，这里补充两种优化方案：

方案1：保留asyncData写法 #

<template>
  <v-container>
    <!-- 转为格式化JSON字符串输出 -->
    <v-row> {{ JSON.stringify(dbData, null, 2) }}</v-row>
  </v-container>
</template>

<script>
export default {
  async asyncData({ $axios }) {
      const res = await $axios.$get('/dashboard')
      // 明确返回dbData属性合并到组件data中
      return  { dbData: res.data }
  }
}
</script>

方案2：保留fetch写法（增加加载状态优化） #

<template>
  <v-container>
    <v-row v-if="dbData"> {{ JSON.stringify(dbData, null, 2) }}</v-row>
    <v-row v-else>数据加载中...</v-row>
  </v-container>
</template>

<script>
export default { 
  data() {
    return { 
      dbData: null,
    }
  },
  async fetch() {   
    const res = await this.$axios.$get('/dashboard')
    this.dbData = res.data
  },
}
</script>

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