Question

我有一个对象，我想为其做菜单。这是我所拥有的，父母ol工作，但是第二个孩子则没有，因为我不知道怎么做。因此，我首先列出各章，然后再列出当前章的各节。如果您看一下我猜的物体，那将非常简单。谁可以帮忙？

<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",
                },
            },
        },
    },
});

Answer 1

我会将您的Chapters对象更改为数组，还将嵌套的sections对象更改为数组，例如您的Chapters对象看起来像这样

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",
                },
            ]
        ]

您显然会继续将所有章节添加到数组中。然后您的模板看起来像这样

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

请注意嵌套的v-for循环，该循环将遍历您拥有的每个章节的sections数组。因此，总而言之，我会将您的对象更改为数组，然后为本章中的各节做一个嵌套的v-for循环

在Vue中嵌套for对象的循环

1 个答案: