Доступ к под-странице в Vue

Question

Я взял на себя проект, который использует WordPress в качестве бэкэнда с wp- json и nuxt / vue в качестве внешнего интерфейса.

На данной странице могут быть подстраницы, и также подстраницы.

Я не знаю, как их достичь.

Первый уровень подстраниц достигается следующим образом: vue:

computed: {
    hasSubMenu() {
        return this.child_pages && this.child_pages.length;
    }
}

Я пытался получить доступ к под-подстраницам следующим образом:

hasSubSubMenu() {
    return this.child_pages.child_pages && this.child_pages.child_pages.length;
}

Но без кубиков.

Если я могу получить доступ к под-подстраницам в vue, я думаю, что ' я могу их отобразить.

Весь сценарий на этой странице выглядит так:

<script>
import api from '~/plugins/api';
import TopSlider from '~/components/blocks/TopSlider';
import ContentBlocks from '~/components/ContentBlocks';
import NewsList from '~/components/NewsList';
import PressList from '~/components/PressList';
import SubMenu from '~/components/SubMenu';
import SubSubMenu from '~/components/SubSubMenu';
import meta from '~/plugins/meta';

export default {
    mixins: [meta],
    components: {
        TopSlider,
        ContentBlocks,
        NewsList,
        PressList,
        SubMenu,
        SubSubMenu
    },
    asyncData(context) {
        return api.getCollection(context).catch((e) => {
            context.error({ statusCode: 404, message: 'Not found' });
        });
    },
    computed: {
        hasSubMenu() {
            return this.child_pages && this.child_pages.length;
        },
        hasSubSubMenu() {
            return this.child_pages.child_pages && this.child_pages.child_pages.length;
        },
        childVisible() {
            return typeof this.$route.params.subpage !== 'undefined';
        }
    }
};
</script>

Answer 1

@ gabriel: Это полная страница. vue файл.

<template>
  <section>
        <top-slider class="slider" :class="{'with-menu': hasSubMenu}" :slides="slides"></top-slider>
        <sub-menu v-if="hasSubMenu" :base="slug" :base-title="title" :links="child_pages"></sub-menu>
        <nuxt-child></nuxt-child>
        <transition name="test">
            <content-blocks v-if="!childVisible" :blocks="contents"></content-blocks>
        </transition>
  </section>
</template>

<script>
import api from '~/plugins/api';
import TopSlider from '~/components/blocks/TopSlider';
import ContentBlocks from '~/components/ContentBlocks';
import NewsList from '~/components/NewsList';
import PressList from '~/components/PressList';
import SubMenu from '~/components/SubMenu';
import meta from '~/plugins/meta';

export default {
    mixins: [meta],
    components: {
        TopSlider,
        ContentBlocks,
        NewsList,
        PressList,
        SubMenu
    },
    asyncData(context) {
        return api.getCollection(context).catch((e) => {
            context.error({ statusCode: 404, message: 'Not found' });
        });
    },
    computed: {
        hasSubMenu() {
            return this.child_pages && this.child_pages.length;
        },
        childVisible() {
            return typeof this.$route.params.subpage !== 'undefined';
        }
    }
};
</script>

<style lang="scss">
.slider {
    margin-bottom: 10px;
    &.with-menu {
        margin-bottom: 60px;
    }
}
.test-enter-active, .test-leave-active {
    transition: all .3s ease-out;
}
.test-enter, .test-leave-to {
    opacity: 0;
}
</style>

Ниже подменю мне нужно добавить, если на текущей странице есть подстраницы.

Answer 2

Вы можете получить доступ к дочерним компонентам с помощью $children prop.

Например:

for (let child1 of this.$children) {
  console.log(child1.$options.name);
  for (const child2 of child1.$children) {
    console.log(child2.$options.name);
  }
}

Но вы обратите внимание, потому что children содержит все подкомпоненты, и вы должен фильтровать только компоненты подстраницы.