Within my Vue Instance, I have two local components that receive props from the data of the Vue Instance. However, when attempting to access the values of these props in one of the local components, they appear as undefined.
The code snippet is as follows:
var custom_erp_widget = new Vue({
el : '#custom-erp-widgets',
data : {
showContainerHeader : false,
currentModuleName : 'foo',
currentModuleFormID : '5',
currentModuleReportID : '6'
},
components : {
'custom-erp-header' : {
template : '<div class="col-12" id="custom-erp-widget-header">'+
'{{ currentModuleName.toUpperCase() }}'+
'</div>',
props : ['currentModuleName']
},
'custom-erp-body' : {
template : '<div class="col-12" id="custom-erp-widget-body">'+
'</div>',
props : ['currentModuleFormID','currentModuleReportID'],
created() {
var _this = this;
eventHub.$on('getFormData', function(e) {
if(e == 'report'){
console.log(_this.$props);
_this.getReportData();
}
else if(e == 'form'){
console.log(_this.$props);
_this.getFormData();
}
});
},
methods : {
getFormData : function(){
var _this = this;
console.log(_this.$props.currentModuleFormID);
console.log(_this.currentModuleFormID);
axios
.get('http://localhost:3000/getFormData',{
params: {
formID: _this.currentModuleFormID + 'a'
}
})
.then(function(response){
console.log(response);
})
}
}
}
},
})
This is how the component is used in HTML:
<div class="row" id="custom-erp-widgets" v-show="showContainerHeader">
<custom-erp-header :current-module-name='currentModuleName'></custom-erp-header>
<custom-erp-body></custom-erp-body>
</div>
I am struggling with accessing the prop values within the local component function. Any suggestions on how to accomplish this successfully?