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

 更新时间:2018年03月17日 11:46:43   作者:qq_20777797  
下面小编就为大家分享一篇vue中实现先请求数据再渲染dom分享,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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

我之前的写法是

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

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

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

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

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

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

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

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

相关文章

  • 详解如何从零开始搭建Express+Vue开发环境

    详解如何从零开始搭建Express+Vue开发环境

    这篇文章主要介绍了详解如何从零开始搭建Express+Vue开发环境,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • 详解基于vue-cli3快速发布一个fullpage组件

    详解基于vue-cli3快速发布一个fullpage组件

    这篇文章主要介绍了详解基于vue-cli3快速发布一个fullpage组件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • 关于echarts 清空上一次加载的数据问题

    关于echarts 清空上一次加载的数据问题

    这篇文章主要介绍了关于echarts 清空上一次加载的数据问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue大数据表格卡顿问题的完美解决方案

    vue大数据表格卡顿问题的完美解决方案

    这篇文章主要给大家介绍了基于vue大数据表格卡顿问题的完美解决方案,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-03-03
  • 浅谈vue首次渲染全过程

    浅谈vue首次渲染全过程

    这篇文章主要介绍了浅谈vue首次渲染全过程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • 深入浅析Vue中的 computed 和 watch

    深入浅析Vue中的 computed 和 watch

    computed 计算属性是通过属性计算得来的属性,watch属性变化,就会触发监听的函数。下面通过本文给大家介绍Vue中的 computed 和 watch,感兴趣的朋友一起看看吧
    2018-06-06
  • Vue项目添加动态浏览器头部title的方法

    Vue项目添加动态浏览器头部title的方法

    这篇文章主要介绍了Vue项目添加动态浏览器头部title的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • vue的url请求图片的问题及请求失败解决

    vue的url请求图片的问题及请求失败解决

    这篇文章主要介绍了vue的url请求图片的问题及请求失败解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-09-09
  • swiper在vue项目中loop循环轮播失效的解决方法

    swiper在vue项目中loop循环轮播失效的解决方法

    今天小编就为大家分享一篇swiper在vue项目中loop循环轮播失效的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue实现配置全局访问路径头(axios)

    vue实现配置全局访问路径头(axios)

    今天小编就为大家分享一篇vue实现配置全局访问路径头(axios),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11

最新评论