Vue.js中访问嵌套JSON对象及示例JSON取Baggage方法

先看你提供的JSON结构：

{
    "Response": {
        "Results": [
            [{
                "Segments": [
                    [{
                        "Baggage": "2 PC(s)"
                    }]
                ]
            }]
        ]
    }
}

你之前用Results.Segments.Baggage获取不到值，核心原因是Results和Segments都是嵌套的数组结构，不是直接的对象属性，必须通过数组索引定位到对应元素后，才能访问内部的属性。

正确的访问方式 #

假设你的JSON数据存在Vue组件的data中，变量名为apiResponse，获取Baggage的写法如下：

在组件的script中访问

this.apiResponse.Response.Results[0][0].Segments[0][0].Baggage

在Vue模板中直接渲染

<template>
  <p>行李额度：{{ apiResponse.Response.Results[0][0].Segments[0][0].Baggage }}</p>
</template>

优化：避免空值报错 #

如果数据存在加载延迟、部分字段缺失的情况，建议用**可选链操作符（?.）**防止控制台抛出错误：

script中安全访问

this.apiResponse?.Response?.Results?.[0]?.[0]?.Segments?.[0]?.[0]?.Baggage

模板中安全渲染

<p>行李额度：{{ apiResponse?.Response?.Results?.[0]?.[0]?.Segments?.[0]?.[0]?.Baggage }}</p>

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