vue中父组件异步获取数据给子组件传参
问题:inferenceData:是父组件异步请求后获取的数据,获取成功之后父组件给子组件传递此数据,子组件使用,子组件获取不到inferenceData的值,打印结果为空数据,结果没有传递过去。原因:异步请求还未获取到结果,已经初始化加载了子组件。父组件:<el-mainv-loading="loading"element-loading-text="拼命加载中"ele
·
问题:
inferenceData:是父组件异步请求后获取的数据,获取成功之后父组件给子组件传递此数据,子组件使用,子组件获取不到inferenceData的值,打印结果为空数据,结果没有传递过去。
原因:异步请求还未获取到结果,已经初始化加载了子组件。
父组件:
<el-main v-loading="loading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)" class="xb-main-table prescription-left-home xb-bg">
<Inference :inferenceData="inferenceData" :sendIndex="sendIndex" :visitId="visitId"></Inference>
</el-main>
created(){
this.getInference();
},
methods:{
async getInference() {
const response = await inference(this, this.visitId);
const data = response.data;
console.log('----------------------获取推演图数据接口-------------------')
console.log(data)
if(response.code == 0){
for(var i = 0; i < data.length; i ++){
data[i].prescData = JSON.parse(data[i].prescData);
data[i].transferData = JSON.parse(data[i].transferData);
}
this.drugState = data[0].drugState;
this.treat = data[0].treat;
this.disease = data[0].disease;
//签名时默认传推演图第一个id,药方第一个id;
this.inferenceTransferId = data[0].id;
this.prescriptionDataList = data[0].prescData;//签名时默认第一个药方药材;
this.inferenceData = data;//非空的数组
this.loading = false;
}
},
}
解决方法:
在父组件异步请求成功后再初始化子组件,引用子组件时添加v-if="flag"
flag初始化为:false.
在异步请求成功后更改flag状态为true。
<el-main v-loading="loading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)" class="xb-main-table prescription-left-home xb-bg">
<Inference v-if="flag" :inferenceData="inferenceData" :sendIndex="sendIndex" :visitId="visitId"></Inference>
</el-main>
async getInference() {
const response = await inference(this, this.visitId);
const data = response.data;
console.log('----------------------获取推演图数据接口-------------------')
console.log(data)
if(response.code == 0){
for(var i = 0; i < data.length; i ++){
data[i].prescData = JSON.parse(data[i].prescData);
data[i].transferData = JSON.parse(data[i].transferData);
}
this.drugState = data[0].drugState;
this.treat = data[0].treat;
this.disease = data[0].disease;
//签名时默认传推演图第一个id,药方第一个id;
this.inferenceTransferId = data[0].id;
this.prescriptionDataList = data[0].prescData;//签名时默认第一个药方药材;
this.inferenceData = data;
this.loading = false;
this.flag = true;//状态更改
}
},
此时子组件在mounted中打印为非空数组。
更多推荐
已为社区贡献33条内容
所有评论(0)