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 相关文章推荐
JSON 和 JavaScript eval使用说明
Jun 13 Javascript
将中国标准时间转换成标准格式的代码
Mar 20 Javascript
在myeclipse中如何加入jquery代码提示功能
Jun 03 Javascript
深入浅析JS Function()构造函数
Aug 22 Javascript
JS实现JSON.stringify的实例代码讲解
Feb 07 Javascript
ES6新特性一: let和const命令详解
Apr 20 Javascript
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
JavaScript数组去重的多种方法(四种)
Sep 19 Javascript
element-ui表格列金额显示两位小数的方法
Aug 24 Javascript
详解webpack 热更新优化
Sep 13 Javascript
layer.alert自定义关闭回调事件的方法
Sep 27 Javascript
关于对TypeScript泛型参数的默认值理解
Jul 15 Javascript
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
DOTA2 6.87版本后新眼位详解攻略
2020/04/20 DOTA
PHP游戏编程25个脚本代码
2011/02/08 PHP
php简单计算页面加载时间的方法
2015/06/19 PHP
帝国cms常用标签汇总
2015/07/06 PHP
PHP处理二进制数据的实现方法
2016/06/13 PHP
PHP实现的文件操作类及文件下载功能示例
2016/12/24 PHP
javascript仿qq界面的折叠菜单实现代码
2012/12/12 Javascript
自定义jQuery选项卡插件实例
2013/03/27 Javascript
document.execCommand()的用法小结
2014/01/08 Javascript
ExtJs纵坐标值重复问题的解决方法
2014/02/27 Javascript
JavaScript函数详解
2015/02/27 Javascript
JavaScript 变量、作用域及内存
2015/04/08 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
2017/11/17 Javascript
使用webpack打包后的vue项目如何正确运行(express)
2018/10/26 Javascript
js实现按钮开关单机下拉菜单效果
2018/11/22 Javascript
微信小程序如何调用图片接口API并居中显示
2019/06/29 Javascript
vscode 插件开发 + vue的操作方法
2020/06/05 Javascript
Python中用altzone()方法处理时区的教程
2015/05/22 Python
python+Django+apache的配置方法详解
2016/06/01 Python
Tornado协程在python2.7如何返回值(实现方法)
2017/06/22 Python
python 编写简单网页服务器的实例
2018/06/01 Python
python 读写文件,按行修改文件的方法
2018/07/12 Python
Django unittest 设置跳过某些case的方法
2018/12/26 Python
python 调用Google翻译接口的方法
2020/12/09 Python
10 套华丽的CSS3 按钮小结
2012/10/03 HTML / CSS
CSS3实现菜单悬停效果
2020/11/17 HTML / CSS
adidas官方旗舰店:德国运动用品制造商
2017/11/25 全球购物
俄罗斯首家面向中国消费者的一站式购物网站:Wruru
2020/05/08 全球购物
出纳工作检讨书
2014/10/18 职场文书
学校艾滋病宣传活动总结
2015/05/09 职场文书
公司催款律师函
2015/05/27 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书
七年级作文之环保作文
2019/10/17 职场文书
JS的深浅复制详细
2021/10/16 Javascript
python垃圾回收机制原理分析
2022/04/13 Python