Vue中API数据advertiser_id字段无法在模板渲染问题咨询

安全阿岳

2026-7-19

问题描述

通过API拉取的数据在Vue控制台中可见，但渲染到模板时advertiser_id字段始终显示空白，而clicks、earnings_per_click、orders等字段使用v-html可正常显示。疑惑该数据是否为只读或受保护，但认为若如此则不应在控制台中显示。

API返回的数据结构如下：

{
  "1": {
    "advertiser_id": "3184",
    "clicks": "27,577",
    "orders": "10,722",
    "earnings_per_click": "257.11"
  }
}

控制台中显示的数据格式：

clicks:"27,577"
earnings_per_click:"257.11"
orders:"10,722"
advertiser_id:"3184"

排查与解决方案

检查模板渲染语法：确认模板中advertiser_id的拼写和调用方式完全正确，比如是否误写为advertiserId，或者使用了错误的嵌套层级（比如数据是包裹在键"1"下的，是否正确取到了内层对象）。尝试用{{ item.advertiser_id }}直接插值，而非v-html（纯文本字段不需要用v-html）。
响应式追踪问题（Vue 2）：Vue 2对新增的对象字段默认不会做响应式处理。如果你的数据是后续赋值的，可通过Vue.set(targetObject, 'advertiser_id', targetValue)手动触发响应式，或者通过解构重新赋值（this.data = {...this.data}）更新数据引用。Vue 3使用reactive/ref则基本不会出现此问题，但深层嵌套数据也可尝试重新赋值触发更新。
验证字段实际值：在数据拉取完成后，通过console.log(typeof yourData.advertiser_id, yourData.advertiser_id)打印字段的类型和实际值，确认控制台显示的"3184"是真实有效的值，而非缓存或显示异常。
排查数据处理逻辑：检查拉取数据后是否有对advertiser_id进行过滤、修改的代码（比如全局过滤器、自定义处理函数），是否存在误清空该字段的情况。
检查模板上下文：确认渲染时的上下文对象确实包含advertiser_id，比如在v-for循环中，是否正确绑定了对应的迭代项。