Vue父组件传递异步获取的数据给子组件
问题场景:
当父组件传给子组件的数据是在父组件中异步获取的时候,如何让子组件获取期望的值?
在父组件中:
首先在data()中定义data_detail为空:
data(){
data_detail: {}
}
然后将data_detail传递给子组件
<enterpriseDetail :data_item='data_detail'></enterpriseDetail>
data_item是在父组件中异步请求的数据:
searchDataDetail(){
var self = this;
self.data_detail_loading = true
var param = {}
param.data_id = self.search_history[0].data_id
param.data_type = self.search_history[0].data_type
param.search_name = self.search_history[0].search_name
self.api.searchDataDetail(param).then(function(res) {
if(res.errcode == 0){
self.data_detail = res.data
self.data_detail_loading = false
}else{
self.$store.commit('newMsg',res.errmsg)
}
})
},
在子组件中:
通过props接收父组件传递过来的值:
props: ['data_item']
当父组件的异步请求为loading状态的时候,data_item的值为空,此时子组件获取的也是空值,有时候需要用到data_item传递过来的值作为参数,这时就会获取不到data_item.enterprise_name这个参数
mounted() {this.checkDataexist()
}
checkDataexist(){
let that = this
let param = {
data_type: "enterprisecreditreport",
data_info: that.data_item.enterprise_name
}
axios.post('/data/checkdataexists', param).then((res) => {
if(res.data.errcode === 0){
that.report_data = res.data.data
}else{
that.$store.commit('newMsg', '获取报告信息失败')
}
})
}
解决方案:
1.在父组件中加上v-if属性:
<enterpriseDetail v-if='data_detail.enterprsie_name' :data_item='data_detail'></enterpriseDetail>
2.在子组件中用watch监听数据变化后再调用函数
watch: {
data_item(val,newVal){
this.$nextTick(() => {
this.checkDataexist()
})
}},
如果上面两种方式都不能解决问题的话,那就用vuex来管理。
Vue父组件传递异步获取的数据给子组件的更多相关文章
- Vue父组件向子组件传递一个动态的值,子组件如何保持实时更新实时更新?
原文:https://blog.csdn.net/zhouweixue_vivi/article/details/78550738 2017年11月16日 14:22:50 zhouweixue_vi ...
- vue中子组件需调用父组件通过异步获取的数据
原因:子组件需要调用父组件传过来的数据,如果这个数据是异步从接口里取的,那这个组件在任何生命周期里都取不到,而应该在接口调取后取到. 需要在msg拿到值后才调用组件,然后你在生命周期created里面 ...
- 关于Vue父组件把异步获取的数据传给子组件的问题
由于父组件中的数据是异步获取的,而子组件在一开始便会渲染,所以会造成子组件渲染完成后,数据还未获取到的情况 这里有一个简单的解决方案:在子组件渲染前,判断父组件数据是否获取完成,数据获取完成后再渲染子 ...
- 详解vue父组件传递props异步数据到子组件的问题
案例一 父组件parent.vue // asyncData为异步获取的数据,想传递给子组件使用 <template> <div> 父组件 <child :child-d ...
- [转]详解vue父组件传递props异步数据到子组件的问题
原文地址:https://www.cnblogs.com/goloving/p/9114389.html 案例一 父组件parent.vue // asyncData为异步获取的数据,想传递给子组件使 ...
- Vue 父组件ajax异步更新数据,子组件props获取不到
转载 https://blog.csdn.net/d295968572/article/details/80810349 当父组件 axjos 获取数据,子组件使用 props 接收数据时,执行 mo ...
- vue 父向子组件传递数据,子组件向父组件传递数据方式
父组件向子组件传递数据通过props,子组件引入到父组件中,设置一个值等于父组件的数据,通过:bind将数据传到子组件中,子组件中通过props接收父组件的数据,这样就可以使用父组件的数据了,循环组件 ...
- Vue : props 使用细节(父组件传递数据给子组件)
props使用细节 在Vue.js中我们可以使用 props 实现父组件传递数据给子组件,下面我们总结一下props的使用细节 1.基础类型检查 2.必填数据 3.默认值 4.自定义验证函数 其中每一 ...
- vue单文件组件形成父子(子父)组件之间通信(vue父组件传递数据给子组件,子组件传递数据给父组件)
看了很多文章,官网文档也有看,对父子组件通信说的不是很明白:决定自己总结一下: vue一般都使用构建工具构建项目:这样每个组件都是单文件组件:而网上很多文章都是script标签方式映入vue,组件通信 ...
随机推荐
- Python之xml学习笔记
XML处理模块 xml是实现不同语言或程序之间进行数据交换的协议,跟json差不多,但json使用起来更简单,至今很多传统公司如金融行业的很多系统的接口还主要是xml. xml的格式如下,就是通过&l ...
- 在Windows平台下Qt的exe报错问题排查步骤
在Windows平台下Qt的exe报错问题排查步骤 工具介绍: 1. Dependency Worker Dependency Worker是一个免费的用具用来扫描任何的32bit 或者64bit 的 ...
- java 的原码、补码、反码小总结
先看一个代码吧: int h; return (key == null) ? 0 : (h = key.hashCode()) ^ (h >>> 16); 这个应该很熟悉吧,是 ja ...
- Js实现继承的方法
原型的作用:1.将公共部分放入原型中,这样构造出的多个实例对象的公共部分只会占用一个公共空间,实现数据共享和节省内存空间 2.通过原型实现继承:构造函数模拟 "类"这个面向对象的概 ...
- [转] IPTables for KVM Host
IPTables for KVM Host January 26, 2012 By Andrew Galdes Use the following IPTables rules “/etc/sysco ...
- 安全运维中基线检查的自动化之ansible工具巧用
i春秋作家:yanzm 原文来自:安全运维中基线检查的自动化之ansible工具巧用 前几周斗哥分享了基线检查获取数据的脚本,但是在面对上百台的服务器,每台服务器上都跑一遍脚本那工作量可想而知,而且都 ...
- 谦先生-hadoop大数据运维纪实
1.NN宕掉切不过去先看zkfc的log引起原因是dfs.ha.fencing.ssh.private-key-files的配置路径配错造成以致无法找到公钥 2.dfs.namenode.shared ...
- 吴恩达机器学习笔记47-K均值算法的优化目标、随机初始化与聚类数量的选择(Optimization Objective & Random Initialization & Choosing the Number of Clusters of K-Means Algorithm)
一.K均值算法的优化目标 K-均值最小化问题,是要最小化所有的数据点与其所关联的聚类中心点之间的距离之和,因此 K-均值的代价函数(又称畸变函数 Distortion function)为: 其中
- 修改openstack用户配额
修改openstack用户配额 这是我在工作中遇到的一个很有趣的小问题,当时的场景是这样的: 公司的云产品要上线数据库服务(trove),因为每创建数据库实例都要占用一个虚拟机及相关资源的配额,尤其是 ...
- 六、activiti工作流-流程定义查询
本节主要讲流程定义查询.查询某个流程设计图片并保存到本地中.查询最新版本的流程定义集合.删除所有key相同的定义 先创建一个java类 package com.java.procdef; import ...