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

本文主要为大家分享一篇vue中实现先请求数据渲染dom分享,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧,希望能帮助到大家。

在项目中遇到了一个问题,下面是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使用axios跨域请求数据实例详解

AngularJs watch监听input value并请求数据的方法

JavaScript用JSONP跨域请求数据实例详解

以上就是vue实现先请求数据再渲染dom的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2780909.html

(0)
上一篇 2025年3月8日 16:10:30
下一篇 2025年3月8日 16:10:38

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • Vue动态创建和删除数据的方法分享

    本文主要为大家分享一篇vue实现动态创建和删除数据的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧,希望能帮助到大家。 视图: 代码如下: nbsp;html>   //导入vue.js  //非常简单了设置了一…

    2025年3月8日
    200
  • React项目的服务端渲染改造详解

    因为对网页seo的需要,要把之前的react项目改造为服务端渲染,经过一番调查和研究,查阅了大量互联网资料。成功踩坑。本文主要和大家介绍了详解react项目的服务端渲染改造(koa2+webpack3.11),小编觉得挺不错的,现在分享给大…

    2025年3月8日
    200
  • 怎样在H5页面实现数据交互

    这次给大家带来怎样在H5页面实现数据交互,在H5页面实现数据交互的注意事项有哪些,下面就是实战案例,一起来看一下。 对于现在APP开发来说,目前流行的两个方式是原生和H5。就如同之前业界程序猿争论的BS和CS之争一样,业界对于H5和原生也有…

    2025年3月8日 编程技术
    200
  • react的服务器渲染

    这次给大家带来react的服务器渲染,使用react服务器渲染的注意事项有哪些,下面就是实战案例,一起来看一下。 前言 最近在写 koa 的时候想到,如果我部分代码提供api,部分代码支持ssr,那我应该如何写呢?(不想拆成 2个服务的情况…

    2025年3月8日
    200
  • Vue2.0怎么实现组件数据的双向绑定

    这次给大家带来Vue2.0怎么实现组件数据的双向绑定,Vue2.0实现组件数据的双向绑定的注意事项有哪些,下面就是实战案例,一起来看一下。 通过上一节的学习,我们了解到了在Vue的组件中数据传递: prop 向下传递,事件向上传递 。意思是…

    2025年3月8日
    200
  • 怎么设置axios的全局请求参数

    这次给大家带来怎么设置axios的全局请求参数,设置axios全局请求参数的注意事项有哪些,下面就是实战案例,一起来看一下。 应用场景: 1,每个请求都带上的参数,比如token,时间戳等。 2,对返回的状态进行判断,比如token是否过期…

    编程技术 2025年3月8日
    200
  • vue与vue-i18n如何实现后台数据的多语言切换

    这次给大家带来vue与vue-i18n如何实现后台数据的多语言切换,vue与vue-i18n实现后台数据的多语言切换的注意事项有哪些,下面就是实战案例,一起来看一下。 在XXX.js文件中定义函数: getUser(context,info…

    编程技术 2025年3月8日
    200
  • 如何修改vue请求数据中的值

    这次给大家带来如何修改vue请求数据中的值,修改vue请求数据中值的注意事项有哪些,下面就是实战案例,一起来看一下。 由于 JavaScript 的限制, Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:vm.item…

    编程技术 2025年3月8日
    200
  • 使用Vue的v-for进行数据分组

    这次给大家带来使用Vue的v-for进行数据分组,使用v-for进行数据分组的注意事项有哪些,下面就是实战案例,一起来看一下。 使用Vue.js可以很方便的实现数据的绑定和更新,有时需要对一个一维数组进行分组以方便显示,循环可以直接使用v-…

    2025年3月8日
    200
  • js实现跨域请求

    本文主要和大家分享js实现跨域请求,主要结合文字和代码,希望能帮助到大家。 1.安装flash,通过与flash交互,实现跨域,但此方法太麻烦,已经很少使用 2. 二是通过在同源域名下架设一个代理服务器来转发,JavaScript负责把请求…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论