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 相关文章推荐
Iframe thickbox2.0使用的方法
Mar 05 Javascript
jquery 模式对话框终极版实现代码
Sep 28 Javascript
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
Dec 28 Javascript
jQuery中extend函数详解
Feb 13 Javascript
Node.js的基本知识简单汇总
Sep 19 Javascript
Angular自定义组件实现数据双向数据绑定的实例
Dec 11 Javascript
通过fastclick源码分析彻底解决tap“点透”
Dec 24 Javascript
微信小程序实现列表下拉刷新上拉加载
Jul 29 Javascript
vue.js数据绑定操作详解
Apr 23 Javascript
实例详解BootStrap的动态模态框及静态模态框
Aug 13 Javascript
react写一个select组件的实现代码
Apr 03 Javascript
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
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过滤危险html代码的函数
2008/07/22 PHP
php empty函数判断mysql表单是否为空
2010/04/12 PHP
php获取文件夹路径内的图片以及分页显示示例
2014/03/11 PHP
PHP CURL获取返回值的方法
2014/05/04 PHP
PHP借助phpmailer发送邮件
2015/05/11 PHP
php数组遍历类与用法示例
2019/05/24 PHP
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
2011/03/12 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
2015/08/12 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
JS实现的几个常用算法
2016/11/12 Javascript
node.js 和HTML5开发本地桌面应用程序
2016/12/13 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
2016/12/27 Javascript
jQuery中on方法使用注意事项详解
2017/02/15 Javascript
VueJS如何引入css或者less文件的一些坑
2017/04/25 Javascript
详解nodejs异步I/O和事件循环
2017/06/07 NodeJs
Vue+Flask实现简单的登录验证跳转的示例代码
2018/01/13 Javascript
微信小程序progress组件使用详解
2018/01/31 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
2019/01/28 jQuery
用map函数来完成Python并行任务的简单示例
2015/04/02 Python
Python实现决策树C4.5算法的示例
2018/05/30 Python
如何在python开发工具PyCharm中搭建QtPy环境(教程详解)
2020/02/04 Python
纯css3实现的动画按钮的实例教程
2014/11/17 HTML / CSS
详解background属性的8个属性值(面试题)
2020/11/02 HTML / CSS
美国最大点评网站:Yelp
2018/02/14 全球购物
优秀的茶餐厅创业计划书
2014/01/03 职场文书
工程类专业自荐信范文
2014/03/09 职场文书
2014小学植树节活动总结
2014/03/10 职场文书
应届毕业生求职信范文
2014/05/08 职场文书
大学生村官考核材料
2014/05/23 职场文书
物理学专业自荐信
2014/06/11 职场文书
四川省传达学习贯彻党的群众路线教育实践活动总结大会精神新闻稿
2014/10/26 职场文书
李强感恩观后感
2015/06/17 职场文书
主婚人致辞精选
2015/07/28 职场文书
创业计划书之校园跑腿公司
2019/09/24 职场文书
Python绘制散乱的点构成的图的方法
2022/04/21 Python