Access property of nested object in Vue.js

Question

Good evening,

I have a piece of code that produces this javascript array (headers) of objects that also contain arrays (I've turned it into JSON string just for you):

[  
   {  
      "text":"One",
      "link":"#one",
      "subheaders":[  
         {  
            "text":"Installation",
            "link":"#Installation"
         }
      ]
   },
   {  
      "text":"Two",
      "link":"#two",
      "subheaders":[  
         {  
            "text":"Installation2",
            "link":"#Installation2"
         }
      ]
   }
]

And I'm trying to access it using:

<ul>
    <li v-for="header in headers">
        <a :href="header.link">{{ header.text }}</a>
    </li>
    <ul>
        <li v-for="subheader in header.subheaders">
            <a :href="subheader.link">{{ subheader.text }}</a>
        </li>
    </ul>
</ul>

The issue is with the second loop, I keep getting:

[Vue warn]: Property or method "header" is not defined on the instance but referenced during render.

Which seems to go away as soon as I remove the second loop.

Answer 1

Your second loop is not in scope of the first loop. I think you want something like this:

<ul>
    <li v-for="header in headers">
        <a :href="header.link">{{ header.text }}</a>
        <ul>
            <li v-for="subheader in header.subheaders">
                <a :href="subheader.link">{{ subheader.text }}</a>
            </li>
        </ul>
    </li>
</ul>

For better imagination vue-js does something like this (not accurate):

for (header in headers) {
  echo '<li><a>' + header.text + '</a></li>'
}

Answer 2

Another solution:

<ul>
<template v-for="header in headers">
    <li>
        <a :href="header.link">{{ header.text }}</a>
    </li>
    <ul>
        <li v-for="subheader in header.subheaders">
            <a :href="subheader.link">{{ subheader.text }}</a>
        </li>
    </ul>
</template>
</ul>

But better put child <ul> in <li> , like in puelo 's code