У меня есть Vue экземпляр с двумя локальными components, когда я пытаюсь получить некоторые данные с сервера, используя axios props, потому что пуст, когда пытаюсь передать его в GET params
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'],
// for emitting events so that the child components
// like (header/body) can catch and act accordingly
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 : {
// function to get the form data from the server
// for the requested form
getFormData : function(){
var _this = this;
var x = _this.$props;
// here the props are having values
//currentModuleFormId: 1
//currentModuleReportId: 0
console.log(x);
axios
.get('http://localhost:3000/getFormData',{
params: {
//here both are '' in the server-side
formID: JSON.stringify(_this.$props) + 'a'
}
})
.then(function(response){
console.log(response);
})
}
}
}
},
})
Это фактический блок
getFormData : function(){
var _this = this;
var x = _this.$props.currentModuleFormId;
console.log(x);
let urs = 'http://localhost:3000/getFormData?formID='+_this.$props.currentModuleFormId.toString();
axios
.get(urs , {
params: {
formID: _this.$props.currentModuleFormId
}
})
.then(function(response){
console.log(response);
})
}
Выход Вкладка в сети
