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 这个图片异步加载并缓存的 ...
随机推荐
- 2008R2 无法安装 HDP Apache 系列服务解决方案
执行下面的 PS 就好了. 特别是 第三行在执行的时候选择 [A] Set-ExecutionPolicy "AllSigned" Enable-PSRemoting Set- ...
- x-boot
https://github.com/Exrick/x-boot-front https://gitee.com/Exrick/x-boot
- 【语义分割】large kernel matters中GCN模块的pytorch实现
GCN模块的实现比较简单,在giuhub上看到两种实现,轻微不同 实现一:https://github.com/ycszen/pytorch-segmentation/blob/master/gcn. ...
- C++_类继承3-动态联编和静态联编
程序调用函数时,将使用哪个可执行代码块呢?编译器负责回答这个问题. 将源代码中的函数调用解释为特定的函数代码块被称为函数名联编(binding). 在C语言中,这非常简单,因为每个函数名对应一个不同的 ...
- pscp 命令---windows和linux之间互相拷贝文件的工具
pscp -r d:\cc root@10.0.0.8:/root/test copy d:\cc content recursively into the /root/test, contains ...
- bzoj2190 仪仗队
题目传送门 思路: 哪些点能被人看到,其实就是哪些点不会被其他点挡住,只要顶点的坐标互质就可以了,互质用欧拉函数算.特殊考虑一下n=1和0的情况. 欧拉函数,Φ(x)=x(1-1/p1)(1-1/p2 ...
- 1128 N Queens Puzzle (20 分)
The "eight queens puzzle" is the problem of placing eight chess queens on an 8 chessboard ...
- JS获取按键的代码,Js如何屏蔽用户的按键
[From] http://www.zgguan.com/zsfx/jsjc/1181.html 在使用JavaScript做WEB键盘事件侦听捕获时,主要采用onkeypress,onkeydown ...
- vim(二) 代码查看
ctags,cscope 查看代码 生成cscope脚本文件 #!/bin/bash if [ -f "*.cscope" ]; then rm -fr *.cscope fi i ...
- Oracle 序列(自增ID)
-- 创建序列CREATE SEQUENCE "JPADMIN"."SEQ_JP_BAS_USER_ID" MINVALUE 1 // 最小值MAXVALUE ...