vue.js - 道具值没有在 axios 内更新
问题描述
我有一个Vue
带有两个 local 的实例components
,当我尝试从服务器获取一些数据时axios
,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);
})
}
}
}
},
})
这是实际的块
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);
})
}
在网络选项卡中输出
解决方案
推荐阅读
- c# - CreateDelegate() System.ArgumentException 方法签名不匹配
- r - 编织 RMarkdown 文件时发生错误
- php - 加载资源失败:在生产服务器laravel上使用ajax发送post请求时服务器响应状态为403
- tomcat - 我如何部署我的 apache tomcat 服务器,因为我不能这样做
- sharepoint - 我可以更改 sharepoint \ LAYOUTS \ 文件夹中的文件吗?
- python - Google Places 在 Flask 中返回一张图片
- python - 连接两列并在python的新列中打印文本
- java - org.xerial.snappy 中的 java.lang.NegativeArraySizeException。解压大文件时
- go - 以官方方式移除已发布的模块
- javascript - 使用 Jquery 克隆 HTML 元素并将单个按钮附加到每个元素