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

Question

我在 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['title'] }}

我错过了什么？这行不通？

还尝试过:

{{ page.banner[0] }}

谢谢!

Answer 1

banner 不是数组。

试试这个:

{{ page.banner.title }}

<小时/>

演示

var page = {
  "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>"
};

document.body.innerText = page.banner.title;