尝试使用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;

Answer 2

您应该检查从Api呼叫中收到了多少个对象。如果有多个，则必须为每个使用v-；如果只有一个，则必须使用

{{ page[0].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[0].banner.title;