vue中实现先请求数据再渲染dom分享


Posted in Javascript onMarch 17, 2018

在项目中遇到了一个问题,下面是vue template中的代码:

vue中实现先请求数据再渲染dom分享

我之前的写法是

vue中实现先请求数据再渲染dom分享

这样做的结果是下面取dom的操作,取到的dom都是undefined,也就是没有取到。

原因是并没有按照 请求数据—>渲染dom—>获取dom的顺序执行,实际的执行顺序是 先获取dom,而此时数组option中还是空的,上面的v-for循环也就没有渲染出dom,所以根本取不到(不理解是为什么)

后来我又把请求数据写在了created函数中,把取dom的操作写在mounted函数中,竟然还是先执行取dom的操作(是通过alert的顺序来判断执行的顺序),我也很绝望啊

最后终于找到了解决的办法:

vue中实现先请求数据再渲染dom分享

看到一个别人的回答是:“在数据请求的回调中使用nextTick,在nextTick的回调里试试~”

还有一个人的回答是:“如果有依赖dom必须存在的情况,就放到mounted(){this.$nextTick(() => { /* code */ })}里面”(这种之前我试过,我太好用,不懂为什么)

我把这两种方法综合起来,其实主要是第一种方法,发现好用了!

以上这篇vue中实现先请求数据再渲染dom分享就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
面向对象的编程思想在javascript中的运用上部
Nov 20 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
Jun 27 Javascript
jQuery scrollFix滚动定位插件
Apr 01 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
Jul 11 Javascript
javascript实现下雨效果
Mar 27 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
Aug 18 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
Feb 22 Javascript
VUE DOM加载后执行自定义事件的方法
Sep 07 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
May 16 Javascript
vue2.0 实现富文本编辑器功能
May 26 Javascript
Layui给switch添加响应事件的例子
Sep 03 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
vue 每次渲染完页面后div的滚动条保持在最底部的方法
Mar 17 #Javascript
vue获取当前激活路由的方法
Mar 17 #Javascript
vue 实现复制内容到粘贴板clipboard的方法
Mar 17 #Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
Mar 17 #Javascript
vue结合Echarts实现点击高亮效果的示例
Mar 17 #Javascript
vue实现a标签点击高亮方法
Mar 17 #Javascript
Vue-路由导航菜单栏的高亮设置方法
Mar 17 #Javascript
You might like
php中一个完整表单处理实现代码
2011/11/10 PHP
php5.3以后的版本连接sqlserver2000的方法
2014/07/28 PHP
PHP与SQL语句常用大全
2016/12/10 PHP
php将html转为图片的实现方法
2017/05/19 PHP
JQuery UI皮肤定制
2009/07/27 Javascript
javascript获取鼠标点击元素对象(示例代码)
2013/12/20 Javascript
JS+CSS实现仿msn风格选项卡效果代码
2015/10/22 Javascript
JavaScript获取function所有参数名的方法
2015/10/30 Javascript
webpack配置文件和常用配置项介绍
2017/04/28 Javascript
NodeJS安装图文教程
2018/04/19 NodeJs
Vue监听一个数组id是否与另一个数组id相同的方法
2018/09/26 Javascript
基于vue和react的spa进行按需加载的实现方法
2018/09/29 Javascript
vue路由跳转传参数的方法
2019/05/06 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
2019/05/31 jQuery
[02:04]2014DOTA2国际邀请赛 BBC小组赛第三天总结
2014/07/12 DOTA
python实现在无须过多援引的情况下创建字典的方法
2014/09/25 Python
Python标准库之多进程(multiprocessing包)介绍
2014/11/25 Python
Python简单实现enum功能的方法
2016/04/25 Python
Python实现PS图像调整颜色梯度效果示例
2018/01/25 Python
Python文本处理之按行处理大文件的方法
2018/04/09 Python
python实现多进程代码示例
2018/10/31 Python
Python设计模式之状态模式原理与用法详解
2019/01/15 Python
解决tensorflow由于未初始化变量而导致的错误问题
2020/01/06 Python
以SQLite和PySqlite为例来学习Python DB API
2020/02/05 Python
matplotlib设置颜色、标记、线条,让你的图像更加丰富(推荐)
2020/09/25 Python
HTML5中div、article、section的区别及使用介绍
2013/08/14 HTML / CSS
美国一家主营日韩美妆护肤品的在线商店:iMomoko
2016/09/11 全球购物
SIDESTEP荷兰:在线购买鞋子
2019/11/18 全球购物
行政办公员自我评价分享
2013/12/14 职场文书
物流专业自荐信
2014/05/23 职场文书
企业文化理念标语
2014/06/10 职场文书
房地产端午节活动方案
2014/08/24 职场文书
政府班子四风问题整改措施思想汇报
2014/10/08 职场文书
小学教师岗位职责
2015/04/02 职场文书
基于Nginx实现限制某IP短时间访问次数
2021/03/31 Servers
python爬虫之利用selenium模块自动登录CSDN
2021/04/22 Python