Trying out the Vue event bus for the first time to pass data to child components from the main vue instance. However, despite my testing, I can't seem to retrieve the data inside my components. I believe the code is correct, but I'm uncertain. Is there a mistake in the code? I am working on a WordPress theme and have three separate files (not using webpack). Two JavaScript files will contain the main Vue instance and the components, while another file will hold the template itself. Any assistance would be greatly appreciated.
// 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 holds the template only
<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>
<!-- column 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-1...