[Vuejs]-Access property of nested object in Vue.js

by

0👍

✅

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>'
}

0👍

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

Leave a comment