CODEWITHSUNDEEP
javascriptvue.jsvuejs2
guggio
guggio

Reputation: 221

event bus vuejs not emit event to pass data to component

I'm using for the first time the Vue event bus to pass data to child components from the main vue instance. After some testing I'm not able to get the data inside my components, I think the code is correct, but I'm not sure of this. Is something wrong in the code? I have three separate file (I'm not using webpack). Two js files that will hold the main vue instance and the components and a file that will hold the template. I'm developing a wordpress theme. Any help?

// app.js file
Vue.prototype.$eventHub = new Vue(); // Global event bus

Vue.directive('prlx', VuePrlx.VuePrlxDirective);

new Vue({
  el: '#ume',
  router,
  data: {
    pageData: [],
    feedImg: []
  },
  watch: {
    $route( to, from ){
      console.log('main instance:'+ to, from);
      this.getPage();
    }
  },
  methods: {
    getPage: function(){
      //console.log(this.$route);
      var slug = this.$route.fullPath.replace(/\//g, "")
      axios.get(uptheme.pages_rest_url+'?slug='+ slug)
        .then( (response) => {
        console.log(response.data);
        response.data.forEach( (item, i) => {
          this.pageData = [item];
          if( item.embedded.gallery_images ){
            item.embedded.gallery_images.forEach( (img) => {
              this.feedImg.push(img);
            });
          }
        });
      });
      this.$eventHub.$emit('page_data', this.pageData);
    },
  }
});

components.js file: 

Vue.component('ume-about',{
  template: '#about-tpl',
  data() {
    return {
      pageData: [],
      feedImg: []
    }
  },
  created() {
    this.$eventHub.$on('page_data', (data) => {
      console.log(data);
      this.pageData.push(data);
    });
  },
  beforeDestroy() {
    $eventHub.$off('page_data');
  }
});

about-template.php file

// This file will only hold the template
<script type="text/x-template" id="about-tpl">
  <div class="container-fluid p-0">
<!-- page cover -->
    <div class="row m-0" v-for="page in pageData">
      <div class="col-sm-12 col-md-12 col-lg-12 col-pagecover p-0" v-if="page.embedded.first_featured_image">
        <img class="img-fluid w-100 h-100 position-absolute" :src="page.embedded.first_featured_image">
        <h1 class="text-white position-relative mt-5 pl-5 pt-5" style="z-index:2;" >{{ page.title.rendered }}</h1>
        <h4 class="text-white position-relative pl-5" style="z-index:2;" v-if="page.ucm._page_subtitle[0]">{{ page.ucm._page_subtitle[0] }}</h4>
      </div>
        <div class="overlay position-absolute"></div>
    </div>
<!-- main content -->
    <div class="row m-0" v-for="page in pageData">
      <div class="col-sm-12 col-md-6 col-lg-6 mt-md-5 mb-md-5 p-5">
        <p class="" v-html="page.content.rendered"></p>
      </div>
      <div class="col-sm-12 col-md-6 col-lg-6 mt-md-5 mb-md-5 p-0">
        <img class="img-fluid w-100" :src="page.embedded.second_featured_image">  
      </div>
    </div>
<!-- parallax -->
    <uptheme-parallax v-for="(page, idx) in pageData" :url="page.embedded.parallax_image" :message="page.excerpt.rendered" ></uptheme-parallax>
<!-- swiper slider -->
    <uptheme-swiper :feed-img="feedImg"></uptheme-swiper>
<!-- colonna 1 -->
    <div class="row m-0" v-for="page in pageData">
      <div class="col-sm-12 col-md-6 col-lg-6 p-0 mt-md-5 mb-md-5" v-if="page.embedded.col_1_image">
        <img class="img-fluid w-100" :src="page.embedded.col_1_image" />
      </div>
      <div class="col-sm-12 col-md-6 col-lg-6 p-5 mt-md-5 mb-md-5" v-if="page.ucm._col_1[0]">
        <h4 class="" v-if="page.ucm._col_1_title[0]">{{ page.ucm._col_1_title[0] }}</h4>
        <p class="" v-html="page.ucm._col_1[0]"></p>
      </div>
    </div>
<!-- colonna 2 -->
    <div class="row m-0" v-for="page in pageData">
      <div class="col-sm-12 col-md-6 col-lg-6 p-5 mt-md-5 mb-md-5" v-if="page.ucm._col_2[0]">
        <h4 class="" v-if="page.ucm._col_2_title[0]">{{ page.ucm._col_2_title[0] }}</h4>
        <p class="" v-html="page.ucm._col_2[0]"></p>
      </div>
      <div class="col-sm-12 col-md-6 col-lg-6 mt-md-5 mb-md-5 p-0" v-if="page.embedded.col_2_image">
        <img class="img-fluid w-100" :src="page.embedded.col_2_image" />
      </div>
    </div>
  </div> <!-- end container-fluid -->
</script>

Upvotes: 0

Views: 606

Answers (1)

Hides
Hides

Reputation: 546

this.$eventHub.$emit('page_data', this.pageData); is not in your axios function and so will return nothing

axios.get(uptheme.pages_rest_url+'?slug='+ slug)
    .then( (response) => {
        console.log(response.data);
        response.data.forEach( (item, i) => {
          this.pageData = [item];
          if( item.embedded.gallery_images ){
            item.embedded.gallery_images.forEach( (img) => {
              this.feedImg.push(img);
            });
          }
        });

        this.$eventHub.$emit('page_data', this.pageData);
    });

Upvotes: 1

Related Questions