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.
- [Vuejs]-Vue html/text editor v-html not working when posted/put (added/edited)
- [Vuejs]-Input value that's binded with vue does not show up in the dom
Source:stackexchange.com