【js】vue获取document.getElementById(a)为null

本文主要是介绍【js】vue获取document.getElementById(a)为null，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

需求

在菜单A页面点击某个元素携带id跳转到B详情页面，B页面获取该id元素的offsetTop, 并自动滚动到该元素处

问题

跳转到B详情页面, 在mounted获取到document.getElementById(a)为null, 因为整个详情页面是从后端获取来渲染的数据, 因此此时dom元素还未渲染出来, 所以拿到的是null, 但是尝试过以下两种办法均无效:

1. this.$nextTick(function() {}) 在这里获取dom, 无效
2. 在接口请求完成后再获取元素, 无效
3. 在created请求接口, mounted获取元素, 无效

  mounted() {this.id = this.$route.params.id;let a = "section" + this.id;var top = document.getElementById(a).offsetTop;$(window).scrollTop(top + 300);$("#myNav").affix({offset: {top: 300}});},

解决

还是得用上计时器做点延迟才行…

  mounted() {setTimeout(() => {this.id = this.$route.params.id;let a = "section" + this.id;var top = document.getElementById(a).offsetTop;$(window).scrollTop(top + 300);$("#myNav").affix({offset: {top: 300}});var wow = new WOW();wow.init();}, 300);},

这篇关于【js】vue获取document.getElementById(a)为null的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---