84 lines
1.9 KiB
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>
|