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

84 lines
1.9 KiB
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: {
// ...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', '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>