Nested for loop of an object in Vue

Question

I have an object and I'd like to make a menu of it. Here is what I have, the parent ol works, but the second one, the child doesn't because I don't know how. So first I list up the chapters, and then I want to list the sections of that current chapter. Pretty straight forward if you look at the object I guess. Who can help?

<template>
    <ol>
    <li
            v-for="({ path, label, chapter }) in $ROUTES.chapters"
            :key="label"
        >
            <nuxt-link
                :to="localePath($ROUTES.home)"
            >
                {{ label }}
            </nuxt-link>

            <ol>
                <li
                    :key="chapter.sections.label"
                >
                    <nuxt-link
                        :to="localePath(chapter.sections.path)"
                    >
                        {{ chapter.sections.label }}
                    </nuxt-link>
                </li>
            </ol>
    </li>
    </ol>
</template>

export const ROUTES = Object.freeze({
    home: "/",
    chapters: {
        chapter1:
        {
            path: "/1-introduction",
            label: "1 Introduction",
            sections: {
                section1: {
                    path: "1.1-all-about-batteries",
                    label: "1.1 All about batteries",
                },
                section2: {
                    path: "1.2-why-recycle",
                    label: "1.2 Why recycle",
                },
                section3: {
                    path: "1.3-ultimate-goal",
                    label: "1.3 Ultimate goal",
                },
            },
        },
        chapter2:
        {
            path: "/2-collecting-and-sorting",
            label: "2 Collecting and sorting",
            sections: {
                section1: {
                    path: "2.1-storing-batteries-at-home",
                    label: "2.1 Storing batteries at home",
                },
                section2: {
                    path: "2.2-bebat-collection-system",
                    label: "2.2 Bebat collection system",
                },
                section3: {
                    path: "2.3-sortbat-sorting-system",
                    label: "2.3 Sortbat sorting system",
                },
            },
        },
        chapter3:
        {
            path: "/3-recycling",
            label: "3 Recycling",
            sections: {
                section1: {
                    path: "3.1-battery-recycling-history",
                    label: "3.1 Battery recycling history",
                },
                section2: {
                    path: "3.2-modern-trends",
                    label: "3.2 Modern trends",
                },
                section3: {
                    path: "3.3-general-recycle-process",
                    label: "3.3 General recycle process",
                },
            },
        },
        chapter4:
        {
            path: "/4-faq",
            label: "4 FAQ",
            sections: {
                section1: {
                    path: "4.1-frequently-asked-questions",
                    label: "4.1 Frequently asked questions",
                },
            },
        },
        chapter5:
        {
            path: "/5-future",
            label: "5 Future",
            sections: {
                section1: {
                    path: "5.1-safety-concerns",
                    label: "5.1 Safety Concerns",
                },
                section2: {
                    path: "5.2-the-future",
                    label: "5.2 The future",
                },
                section3: {
                    path: "5.3-a-message-from-bebat",
                    label: "5.3 A message from Bebat",
                },
            },
        },
    },
});

Aaron Angle · Accepted Answer · 2020-06-29 18:21:17Z

1

I would change your chapters object to an array and I would also change the nested sections object to an array for example your chapters object would look like this

chapters: [
        {
            path: "/1-introduction",
            label: "1 Introduction",
            sections: [
                 {
                    path: "1.1-all-about-batteries",
                    label: "1.1 All about batteries",
                },
                {
                    path: "1.2-why-recycle",
                    label: "1.2 Why recycle",
                },
                 {
                    path: "1.3-ultimate-goal",
                    label: "1.3 Ultimate goal",
                },
            ]
        ]

You would obviously continue to add all the chapters to the array. And then your template would look like this

<template>
    <ol>
    <li
            v-for="chapter in $ROUTES.chapters"
            :key="chapter.label"
        >
            <nuxt-link
                :to="localePath($ROUTES.home)"
            >
                {{ chapter.label }}
            </nuxt-link>

            <ol>
                <li
                    v-for="section in chapter.section"
                    :key="section.label"
                >
                    <nuxt-link
                        :to="localePath(section.path)"
                    >
                        {{section.label }}
                    </nuxt-link>
                </li>
            </ol>
    </li>
    </ol>
</template>

Note the nested v-for loop that will go over your sections array for every chapter that you have. So to summarize I would change your objects to arrays and then do a nested v-for loop for your sections in the chapter

answered Jun 29, 2020 at 18:21

Aaron Angle

5145 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Borsj Over a year ago

@Aaron Angle Okay, but why change the object? And :to="localePath($ROUTES.home)" can't be in a template because it's only used once. This has to be $ROUTES.label I presume. This doesn't work, too bad.

Borsj Over a year ago

This is the solution :) Thanks, but I preferred my object though.. ` <ol> <li v-for="chapter in $ROUTES.chapters" :key="chapter.label" > <nuxt-link :to="localePath($ROUTES.home)" > {{ chapter.label }} </nuxt-link> <ol> <li v-for="section in chapter.sections" :key="section.label" > <nuxt-link :to="localePath(section.path)" > {{ section.label }} </nuxt-link> </li> </ol> </li> </ol> `

Aaron Angle Over a year ago

If you're going to use a v-for I'm pretty sure you need to use an array with objects instead of just an object. I'm sure there's a way to do it keeping your object the same but this is the way I would do it

Collectives™ on Stack Overflow

Nested for loop of an object in Vue

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related