materio-d8/web/themes/custom/materiotheme/vuejs/components/Content/HeaderMenu.vue

<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: {
    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.$router.push(href)
    }
  },
  render(h) {
    // console.log('headerMenu render');
    if(!this.template){
      return h('span', '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>