Javascript 尝试使用VueJS插值从嵌套对象的属性检索值时出错

在Vue JS中显示阵列内部的阵列时遇到问题。这是我的JSON：

{
  "id": 1,
  "slug": "test-page",
  "banner": {
    "title": "banner title",
    "subTitle": "my sub title",
    "hasSubTitle": false,
    "hasClass": "jumbotron-houses jumbotron-page"
  },
  "pageTitle": "Test Page",
  "pageDescription": "My Page Description",
  "content": "<h1>test</h1>"
}

我错过了什么？这不管用

还尝试：

{{ page.banner[0] }}

---

谢谢

横幅

不是数组

请尝试以下方法：

{{ page.banner.title }}

---

演示

var页面={
“id”：1，
“slug”：“测试页面”，
“横幅”：{
“标题”：“横幅标题”，
“副标题”：“我的副标题”，
“hasSubTitle”：错误，
“hasClass”：“jumbotron房屋jumbotron页面”
},
“页面标题”：“测试页面”，
“页面描述”：“我的页面描述”，
“内容”：“测试”
};
document.body.innerText=page.banner.title您应该检查从Api调用接收到多少对象。如果有多个，则必须为每个选项使用v-for，或者如果只有一个选项，则必须使用v-for

{{ page[0].banner.title }}

如果是当前页面，请检查名称页面


var页面=[{
“id”：1，
“slug”：“测试页面”，
“横幅”：{
“标题”：“横幅标题”，
“副标题”：“我的副标题”，
“hasSubTitle”：错误，
“hasClass”：“jumbotron房屋jumbotron页面”
},
“页面标题”：“测试页面”，
“页面描述”：“我的页面描述”，
“内容”：“测试”
},
];
document.body.innerText=页面[0]。banner.title这对我不起作用。我的数据来自一个外部URL，一个JSON格式的API，我得到：无法读取未定义的属性“title”
{{ page[0].banner.title }}