MainContent.vue 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. <template lang="html">
  2. <div :id="id">
  3. <!-- <router-view name="home" :html="home_template_src"></router-view> -->
  4. <!-- <router-view name="base"></router-view> -->
  5. <router-view :html="home_template_src" :full="full_home_template_loaded"/>
  6. </div>
  7. </template>
  8. <script>
  9. import { mapState, mapActions } from 'vuex'
  10. import { MA } from 'vuejs/api/ma-axios'
  11. import router from 'vuejs/route'
  12. export default {
  13. router,
  14. props:['id','html', 'isfront'],
  15. data() {
  16. return {
  17. home_template_src: null,
  18. full_home_template_loaded: false
  19. }
  20. },
  21. beforeMount() {
  22. // console.log('MainContent beforeMount this.html', this.html)
  23. if (!this.home_template_src) {
  24. // // console.log('no home_template_src')
  25. // if (this.html && this.isfront) { // if html prop is available and we are landing on home then record it has data
  26. // this.home_template_src = this.html
  27. // } else { // else get it from ajax (e.g. if we didn't load the page from home)
  28. // this.getHomeHtml()
  29. // }
  30. // console.log('no home_template_src')
  31. if (this.isfront) {
  32. // if html prop is available and we are landing on home then record it has data
  33. this.home_template_src = this.html
  34. }
  35. // in any case load the full home template if not already loaded
  36. if (!this.full_home_template_loaded) {
  37. this.getHomeHtml()
  38. }
  39. }
  40. },
  41. methods: {
  42. getHomeHtml(){
  43. console.log('MainContent getHomeHtml');
  44. MA.get('materio_home/ajax/gethome')
  45. .then(({data}) => {
  46. // console.log('MainContent getHomeHtml data', data)
  47. this.full_home_template_loaded = true
  48. this.home_template_src = data.rendered // record the html src into data
  49. })
  50. .catch((error) => {
  51. console.warn('Issue with getHomeHtml', error)
  52. })
  53. }
  54. }
  55. }
  56. </script>
  57. <style lang="scss" scoped>
  58. </style>