这篇文章主要介绍“vue异步加载dom元素之后无法获得如何解决”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“vue异步加载dom元素之后无法获得如何解决”文章能帮助大家解决问题。
vue异步加载dom元素后无法获得
vue存在大量的异步加载问题，比如动态创建dom元素，若你紧接着去获取创建的dom元素是获取不到的。
解决办法
第一种办法比较low，使用setTimeout方法，让获取dom的代码在动态创建元素之后一段时间(这个时间非常的短)去执行。但这种方法应该是存在风险的，不推荐。
第二种办法 在将要执行的代码上套一层 this.$nextTick()
例如：
this.$nextTick(function() {
let grids = _that.$refs.datamessage;
console.log(grids);
for (let i = 0; i < grids.length; i++) {
let xb = grids[i].getAttribute("index");
//alert(xb);
if (_that.value.indexOf(xb) != -1) {
grids[i].setAttribute("ifSelect", "true");
grids[i].style.backgroundColor = "#b3d8ff";
grids[i].style.color = "#409eff";
}
}
});vue稳健的获取dom元素
1、获取Element的弹框中的Dom元素
**由于弹框由v-if控制，在初始页面渲染的时候，并不存在该Dom元素，所以在mounted中，获取不到该弹框的Dom元素，无法添加原生时间，如下拉加载**
下面提供稳健的获取弹框Dom元素的方法，
首先，由于弹框是由v-if判断，则可以在watch中监听v-if所对应的变量，在为true时，则弹框打开，此时去获取DOM元素，发现仍然获取不到。。。。
此时，需要将获取事件转为异步执行，即写在setTimeout中，即可。稳健一些，可以在nextTck中写出。
（仍旧会存在问题）
若在Element提供的弹框回调中（弹框打开动画结束），则可以保证取到
<el-dialog :visible.sync="dialogVisible" ref="dialog" @opened="dialogOpened" >
dialogOpened() {
this.$nextTick(() => {
setTimeout(() => {
let scrollContent = document.getElementById("scrollContent");
if (scrollContent) {
scrollContent.addEventListener("scroll", this.onScroll);
console.log("获取到滚动节点----");
} else {
console.log("未获取到滚动节点====");
}
});
});
}2、如果以上方法均无法解决
因为可能数据是异步获取而后填入DOM中，则可以在更新函数中进行获取DOM的操作，但此时，需要加很多限制，因为无法限制由谁引起的更新！需要标志位减少获取次数。
可以通过在watch监听函数中，进行标志位的更改。
有此想法的前提，是在给element UI 弹框中，嵌套了标签页 ，在每次切换标签页的过程中，DOM都会销毁，所以对DOM获取时机的把握比较关键，而根据标签页中的数据是否渲染完毕后，去获取改DOM容器，可以说是相当稳健。
无法获取Element弹窗内嵌套的组件问题
问题：当在el-dialog内嵌套组件时，若el-dialog没有打开，则获取不到其内部嵌套的内容，ref也不可以
解决方法：在翻阅Element 隐藏滚动条部分的源码时，发现其获取dom元素的方法是通过computed来获取
经过验证，可以在弹框打开的回调里面，利用计算属性进行获取
<el-dialog ref="dialog" @opened="dialogOpened"> <div ref="innerContent"></div> </el-dialog>
computed:{
getInnerDom(){
//此时之只能获取到dialog
console.log(this.$refs)
return this.$refs.innerContent
}
}
methods:{
dialogOpened(){
//此时可以获取到内容节点
console.log(this.getInnerDom)
}
}