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 相关文章推荐
Jquery Change与bind事件代码
Sep 29 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
Jan 25 Javascript
JS实现表格数据各种搜索功能的方法
Mar 03 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
Dec 15 Javascript
vuejs使用FormData实现ajax上传图片文件
Aug 08 Javascript
Vue.js 实现数据展示全部和收起功能
Sep 05 Javascript
vue 详情跳转至列表页实现列表页缓存
Mar 27 Javascript
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
使用typescript构建Vue应用的实现
Aug 26 Javascript
p5.js临摹动态图形实现方法详解
Oct 23 Javascript
Node.js API详解之 querystring用法实例分析
Apr 29 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
Jul 11 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
用PHP伪造referer突破网盘禁止外连的代码
2008/06/15 PHP
php添加文章时生成静态HTML文章的实现代码
2013/02/17 PHP
php静态文件返回304技巧分享
2015/01/06 PHP
php用户密码加密算法分析【Discuz加密算法】
2016/10/12 PHP
PHP在线打包下载功能示例
2016/10/15 PHP
用一段js程序来实现动画功能
2007/03/06 Javascript
ExtJS4 组件化编程,动态加载,面向对象,Direct
2011/05/12 Javascript
深入了解javascript中的prototype与继承
2013/04/14 Javascript
JS与C#编码解码
2013/12/03 Javascript
jquery无法设置checkbox选中即没有变成选中状态
2014/03/27 Javascript
Javascript单元测试框架QUnitjs详细介绍
2014/05/08 Javascript
JavaScript中合并数组的N种方法
2014/09/16 Javascript
JavaScript控制按钮可用或不可用的方法
2015/04/03 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
2015/05/25 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
2016/07/28 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
js处理层级数据结构的方法小结
2017/01/17 Javascript
js实现文字列表无缝滚动效果
2017/06/23 Javascript
ionic grid(栅格)九宫格制作详解
2018/06/30 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
解决Vue中使用keepAlive不缓存问题
2020/08/04 Javascript
Python中数字以及算数运算符的相关使用
2015/10/12 Python
老生常谈python的私有公有属性(必看篇)
2017/06/09 Python
pandas数据框,统计某列数据对应的个数方法
2018/04/11 Python
Python简单过滤字母和数字的方法小结
2019/01/09 Python
Python爬取腾讯视频评论的思路详解
2019/12/19 Python
Python3 shutil(高级文件操作模块)实例用法总结
2020/02/19 Python
基于python 凸包问题的解决
2020/04/16 Python
python 实现控制鼠标键盘
2020/11/27 Python
allbeauty美国:英国在线美容店
2019/03/11 全球购物
室内设计实习自我鉴定
2013/09/25 职场文书
个人求职简历中英文自我评价
2013/12/16 职场文书
国家助学金获奖感言
2014/01/31 职场文书
中学综治宣传月活动总结
2015/05/07 职场文书
小学英语教师2015年度个人工作总结
2015/10/14 职场文书
开网店计划分析
2019/07/30 职场文书