Vue 3 解析POST请求返回的嵌套JSON时无法获取深层字段问题

• 数据类型不匹配：你初始化tokens为数组，但POST接口返回的是单个JSON对象，直接赋值后tokens会被覆盖为对象。此时用v-for遍历对象时，会遍历对象的所有属性值：第一个属性值是字符串ok，第二个才是item对应的嵌套对象。遍历到第一个字符串属性时调用t.token.value会触发隐式报错，导致渲染中断。
• 取值路径错误：接口返回的token字段嵌套在item属性下，无法直接从接口返回的根对象取到token属性。

方案1：单条数据存储（推荐，当前接口只返回单条token） #

调整data定义 #

将数组改为单个对象存储返回结果：

export default {
  name: "Header",
  data() {
    return {     
      tokenInfo: null
    };
  },
}

修改请求赋值逻辑 #

fetch('url', requestOptions)
    .then(response => response.json())
    .then(data => {
      if(data.status === 'ok') {
        this.tokenInfo = data.item
      }
    })
    .catch(err => console.log(err.message))

调整模板渲染 #

不需要v-for遍历，直接判断存在后取值即可：

<div v-if="tokenInfo">
  Fetch: {{ tokenInfo.token.value }}
</div>

方案2：保留数组存储（适用于后续要追加多条token的场景） #

修改请求赋值逻辑 #

将返回的item对象追加到数组中，不要直接覆盖整个数组：

fetch('url', requestOptions)
    .then(response => response.json())
    .then(data => {
      if(data.status === 'ok') {
        this.tokens.push(data.item)
      }
    })
    .catch(err => console.log(err.message))

调整模板取值路径 #

修正嵌套层级的取值写法：

<div v-for="(t, index) in tokens" :key="index">
  <div>
    Fetch: {{ t.token.value }}
  </div>
</div>

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