HeaderMenu.vue 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <script>
  2. import Vue from 'vue'
  3. import { mapState, mapActions } from 'vuex'
  4. import { MA } from 'vuejs/api/ma-axios'
  5. import router from 'vuejs/route'
  6. export default {
  7. router,
  8. props:['id','dom_html'],
  9. data() {
  10. return {
  11. html: null,
  12. template: null
  13. }
  14. },
  15. computed: {
  16. ...mapState({
  17. isloggedin: state => state.User.isloggedin
  18. })
  19. },
  20. beforeMount() {
  21. // console.log("beforeMount header_menu", this.html);
  22. if(!this.template){
  23. // console.log('no home_template');
  24. if(this.dom_html){ // if html prop is available
  25. this.html = this.dom_html
  26. this.compileTemplate()
  27. }else{ // else get it from ajax
  28. this.getMenuBlockHtml()
  29. }
  30. }
  31. },
  32. methods: {
  33. // ...mapActions({
  34. // openCloseHamMenu: 'Common/openCloseHamMenu'
  35. // }),
  36. compileTemplate(){
  37. this.template = Vue.compile(this.html)
  38. },
  39. getMenuBlockHtml(){
  40. MA.get('materio_decoupled/ajax/getheadermenu')
  41. .then(({data}) => {
  42. // console.log('HeaderMenu getMenuBlockHtml data', data);
  43. this.html = data.rendered // record the html src into data
  44. })
  45. .catch(( error ) => {
  46. console.warn('Issue with getMenuBlockHtml', error)
  47. })
  48. },
  49. onclick (event) {
  50. // console.log("Clicked on header menu link", event);
  51. const href = event.target.getAttribute('href')
  52. // this.openCloseHamMenu(false)
  53. this.$router.push(href)
  54. }
  55. },
  56. render(h) {
  57. // console.log('headerMenu render');
  58. if(!this.template){
  59. return h('span', 'Loading ...')
  60. }else{
  61. return this.template.render.call(this)
  62. }
  63. },
  64. watch: {
  65. html(n, o) {
  66. // console.log('header_menu html changed', o, n)
  67. this.compileTemplate()
  68. },
  69. isloggedin(n, o) {
  70. console.log("HeaderMenu isloggedin changed", o, n)
  71. this.getMenuBlockHtml()
  72. }
  73. }
  74. }
  75. </script>
  76. <style lang="scss" scoped>
  77. </style>