[Vuejs]-How to v-for loop a nested navigation in Vue.js?

by

4👍

✅

The problem is the closing </a> tag at the end of this line:

<a v-for="item in itemLinks" :href="`${item.link}`">{{ item.title }}</a>

The item for the v-for will only be defined within the scope of this tag, so the lines that follows won’t know anything about it.

My guess would be that you were aiming for this:

<nav id="hf-nav">
    <template v-for="item in itemLinks">
        <a :href="`${item.link}`">{{ item.title }}</a>
        <nav v-if="item.subItems">
            <a v-for="sub in item.subItems" :href="`${sub.link}`">{{ sub.title }}</a>
        </nav>
    </template>
</nav>

I’m a little surprised that your editor wasn’t warning you that the HTML tags weren’t balanced. The closing </a> tag on the penultimate line of your code doesn’t have a matching opening tag.

Incidentally, there’s no need to use backticks for :href="`${item.link}`", you can just write :href="item.link". Likewise for :href="sub.link".

👤skirtle

Leave a comment