props的异步加载问题
在写vue项目的时候,父组件调用ajax的接口获得数据,然后赋值给data中的初始值,然后通过props传给子组件,子组件在created的时候,获得的props的值有的时候是undefined,因为ajax是异步请求,执行的http线程,js线程执行的过程可能还没有值的返回.
保证在子组件created的时候也有值,解决方案是在父组件中调用子组件的时候写一个v-if,在ajax值返回的时候再v-if=‘true’解决
//父组件中
<v-child :data='data' v-if='flag'></v-child> methods:{
init(){
this.axios.get().then((res)=>{
this.data=res.data;
this.flag=true
})
}
} //子组件 props {
data: {
type: Object,
default: function () {
return { message: 'hello' }
}
}
} created(){
this.init()
}
props的异步加载问题的更多相关文章
- React配合Webpack实现代码分割与异步加载
这是Webpack+React系列配置过程记录的第四篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...
- react异步加载组件
1. 创建 asyncComponent 异步加载工具 import React from 'react' function asyncComponent(loadComponent){ class ...
- React.lazy和React.Suspense异步加载组件
在React16.6中引入了React.lazy和React.Suspense,这两个组件,可以用来实现异步加载组件. 例如: const johanComponent = React.lazy(() ...
- winform异步加载数据到界面
做一个学习记录. 有两个需求: 1.点击按钮,异步加载数据,不卡顿UI. 2.把获取的数据加载到gridview上面. 对于需求1,2,代码如下: public delegate void ShowD ...
- 【Android】纯代码创建页面布局(含异步加载图片)
开发环境:macOS 10.12 + Android Studio 2.2,MinSDK Android 5.1 先看看总体效果 本示例是基于Fragment进行的,直接上代码: [界面结构] 在 F ...
- 【代码笔记】iOS-实现网络图片的异步加载和缓存
代码: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. se ...
- 使用jOrgChart插件, 异步加载生成组织架构图
jOrgChart插件是一个用来实现组织结构图的Jquery的插件- 一.特点 1.支持拖拽修改子节点: 2.支持节点缩放展示: 3.方便修改css定义样式: 4.超轻量型: 5.兼容性好,基本支持所 ...
- 向上滚动或者向下滚动分页异步加载数据(Ajax + lazyload)[上拉加载组件]
/**** desc : 分页异步获取列表数据,页面向上滚动时候加载前面页码,向下滚动时加载后面页码 ajaxdata_url ajax异步的URL 如data.php page_val_name a ...
- Android-Universal-Image-Loader 图片异步加载类库的使用
在博客中看到一篇利用组件进行图片异步加载的文章在此作记录 原文:http://blog.csdn.net/vipzjyno1/article/details/23206387 这个图片异步加载并缓存的 ...
随机推荐
- BZOJ3156 防御准备 斜率优化dp
Description Input 第一行为一个整数N表示战线的总长度. 第二行N个整数,第i个整数表示在位置i放置守卫塔的花费Ai. Output 共一个整数,表示最小的战线花费值. Sampl ...
- Ubuntu上使用systemd创建服务文件来启动和监视底层网络应用程序实现守护进程
在Linux上使用Nginx设置ASP.NET Core的托管环境,并部署到它 创建服务文件 创建服务定义文件: sudo vim /etc/systemd/system/kestrel-basic. ...
- ansible基本模块-command
- vue脚手架的安装和使用
脚手架安装:
- windows xp 环境下 Oracle8i 双击安装文件无反应的解决办法
今天调试一份比较老的程序,数据库用的是Oracle8i,在本地xp系统上搞了半天,双击安装文件就是没反应! 在网上整理了一下解决办法: 1.将ORACLE软件拷贝到硬盘. (比如我拷贝到:F:\Ora ...
- Maven学习笔记(一)—— Maven基础
一.Maven介绍 1.1 什么是maven? Maven是apache下的一个纯Java开发的开源项目,它是一个项目管理工具,使用maven对Java项目进行构建.依赖管理. 1.2 什么是项目构建 ...
- 多气体组分DEM流动的DMP并行内存错误
今天踩到一个坑.调DEM反应的时候,气体需要设置为多组分,这时就不能用 DES_INTERP_ON = .T. DES_INTERP_SCHEME = 'GARG_2012' 这个差值格式了,否则DM ...
- java单元测试之Mock静态方法
1 public final class AmountUtil { public static String CustomFormatWith2Digits(int amount) { return ...
- 剑指offer——面试题15:二进制中 1的个数
// 面试题15:二进制中1的个数 // 题目:请实现一个函数,输入一个整数,输出该数二进制表示中1的个数.例如 // 把9表示成二进制是1001,有2位是1.因此如果输入9,该函数输出2. #inc ...
- 让android系统中任意一个view变成进度条
1.效果 2.进度条背景drawable文件 结束后可以恢复原背景. <?xml version="1.0" encoding="utf-8"?> ...