<script> import Vue from 'vue' import { mapState, mapActions } from 'vuex' import MA from 'vuejs/api/ma-axios' import router from 'vuejs/route' export default { router, props:['id','dom_html'], data() { return { html: null, template: null } }, computed: { ...mapState({ isloggedin: state => state.User.isloggedin }) }, beforeMount() { // console.log("beforeMount header_menu", this.html) if (!this.template) { // console.log('no home_template') if (this.dom_html) { // if html prop is available this.html = this.dom_html this.compileTemplate() } else { // else get it from ajax this.getMenuBlockHtml() } } }, methods: { // ...mapActions({ // openCloseHamMenu: 'Common/openCloseHamMenu' // }), compileTemplate(){ this.template = Vue.compile(this.html) }, getMenuBlockHtml(){ MA.get('materio_decoupled/ajax/getheadermenu') .then(({data}) => { // console.log('HeaderMenu getMenuBlockHtml data', data) this.html = data.rendered // record the html src into data }) .catch((error) => { console.warn('Issue with getMenuBlockHtml', error) }) }, onclick (event) { // console.log("Clicked on header menu link", event) const href = event.target.getAttribute('href') // this.openCloseHamMenu(false) this.$router.push(href) } }, render(h) { // console.log('headerMenu render') if (!this.template) { return h('span', $t('default.Loading…')) } else { return this.template.render.call(this) } }, watch: { html(n, o) { // console.log('header_menu html changed', o, n) this.compileTemplate() }, isloggedin(n, o) { console.log("HeaderMenu isloggedin changed", o, n) this.getMenuBlockHtml() } } } </script> <style lang="scss" scoped> </style>