[Vuejs]-Access sub sub page in Vue

0๐Ÿ‘

You can access the child components with $children prop.

For example:

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

But you have attention, because the children contain all sub-components and you must filter just sub-page components.

0๐Ÿ‘

@gabriel: This is the complete page.vue file.

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

Below the sub menu, I need to add if the current page has sub pages.

Leave a comment