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

Question

I'm having trouble displaying an array inside of an array in Vue JS. This is my 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>"
}

I'd like to show the banner Title and each individual banner elements. I've tried:

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

What am I missing? This doesn't work?

Also tried:

{{ page.banner[0] }}

Thanks!

Answer 1

banner is not an array.

Try this instead:

{{ page.banner.title }}

---

demo

 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

You should check how many objects you received from your Api call. If there is more than one you must use a v-for for each of them or if there is only one you must use

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

Also check the name page if it is currect.

 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;