当我尝试使用Vue
components
从服务器获取一些数据时,我有一个带有两个本地axios
的{{1}}实例,因为尝试传递给它时为空props
参数
GET
这是实际的方块
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);
})
}
}
}
},
})
在“网络”标签中输出