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面向对象入门基础详细介绍
Sep 05 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
Aug 30 Javascript
JS读取XML文件示例代码
Nov 15 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
Sep 03 Javascript
跟我学习javascript的浮点数精度
Nov 16 Javascript
jqGrid用法汇总(全经典)
Jun 28 Javascript
关于JavaScript数组你所不知道的3件事
Aug 24 Javascript
js阻止默认右键的下拉菜单方法
Jan 02 Javascript
vue车牌号校验和银行校验实战
Jan 23 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
vue中的mescroll搜索运用及各种填坑处理
Oct 30 Javascript
vue实现登录功能
Dec 31 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 随机数的深入理解
2013/06/05 PHP
php+ajax实现无刷新数据分页的办法
2015/11/02 PHP
PHP中使用GD库绘制折线图 折线统计图的绘制方法
2015/11/09 PHP
ThinkPHP 模板substr的截取字符串函数详解
2017/01/09 PHP
php nginx 实时输出的简单实现方法
2018/01/21 PHP
php弹出提示框的是实例写法
2019/09/26 PHP
javascript window对象属性整理
2009/10/24 Javascript
js DOM的学习笔记
2011/12/22 Javascript
浅析js封装和作用域
2013/07/09 Javascript
jQuery实现多按钮单击变色
2014/11/27 Javascript
DOM基础教程之事件对象
2015/01/20 Javascript
微信小程序 支付后台java实现实例
2017/05/09 Javascript
微信小程序动态添加分享数据
2017/06/14 Javascript
jQuery实现用户信息表格的添加和删除功能
2017/09/12 jQuery
2种简单的js倒计时方式
2017/10/20 Javascript
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
nodejs实现解析xml字符串为对象的方法示例
2018/03/14 NodeJs
vue+iview+less 实现换肤功能
2018/08/17 Javascript
JS闭包原理与应用经典示例
2018/12/20 Javascript
解决removeEventListener 无法清除监听的问题
2020/10/30 Javascript
vue二选一tab栏切换新做法实现
2021/01/19 Vue.js
[03:09]2014DOTA2国际邀请赛 Mushi前队友送上祝福
2014/07/12 DOTA
通过实例浅析Python对比C语言的编程思想差异
2015/08/30 Python
pygame游戏之旅 游戏中添加显示文字
2018/11/20 Python
详解从Django Rest Framework响应中删除空字段
2019/01/11 Python
在pycharm下设置自己的个性模版方法
2019/07/15 Python
Tensorflow实现酸奶销量预测分析
2019/07/19 Python
python实现canny边缘检测
2020/09/14 Python
html5+CSS3+JS实现七夕言情功能代码
2017/08/28 HTML / CSS
内部类的定义、种类以及优点
2013/10/16 面试题
安全资料员岗位职责范本
2014/06/28 职场文书
收款委托书范本
2014/09/11 职场文书
七年级数学教学反思
2016/02/17 职场文书
win10下go mod配置方式
2021/04/25 Golang
浅谈golang package中init方法的多处定义及运行顺序问题
2021/05/06 Golang
python中使用redis用法详解
2022/12/24 Redis