In a peculiar scenario, I have a controls component that contains a menu component which, in turn, includes another controls component without a menu. It may seem strange, but that's just how it's designed.
Here's what I'm trying to accomplish:
Controls Component:
import {Component, Prop, Vue} from 'vue-property-decorator'
import Burger from "./Burger";
import ShadowLogo from "./ShadowLogo";
import MegaMenu from "./MegaMenu";
@Component
export default class Controls extends Vue {
@Prop({default: false})
showMenu: boolean;
renderLogo(h) {
return <div class="logo"><ShadowLogo/></div>
}
renderBurger(h) {
return <Burger opened={this.showMenu} label="Menu" on-want-change={e => this.$emit('show-menu', !this.showMenu)}></Burger>
}
renderFooter(h) {
return <div class="copyrights"></div>
}
renderMenu(h) {
return <div class="menu-layer">
{this.showMenu ? <transition name="fade" appear={true}><MegaMenu/></transition> : null}
</div>
}
render(h) {
return <div class={["control-overlay", this.showMenu ? 'menu-opened' : null]}>
{this.renderMenu(h)}
{this.renderLogo(h)}
{this.renderBurger(h)}
{this.renderFooter(h)}
</div>
}
}
The inner controls component for the menu, to be inserted within the menu itself, is essentially the same as the controls component but without the menu (to avoid recursion).
import Controls from "./Controls";
import {Component} from 'vue-property-decorator'
@Component
export default class MenuInnerControls extends Controls {
renderMenu(h) {
return null;
}
}
However, when setting up this configuration, I encounter an error:
51:13 Uncaught TypeError: Super expression must either be null or a function, not undefined
at _inherits (51:13)
at eval (51:19)
at eval (MenuInnerControls.js?9737:8)
at Object.<anonymous> (app.js:394)
at __webpack_require__ (app.js:20)
at eval (22:4)
at Object.<anonymous> (app.js:219)
at __webpack_require__ (app.js:20)
at eval (18:8)
at Object.<anonymous> (app.js:192)
(MenuInnerControls.js?9737:8 — refers to the renderMenu method in the inherited class)