Vue mouted生命周期函数中获取不到v-for动态渲染的dom元素-解决
前言:v-for渲染的dom元素所依赖的数据为异步加载的数据,id为动态绑定的数据,想在mouted中通过指定id获取dom元素,对其操作。<div class="equ-message " v-for="(item, index) in data_equlist" id ="item.id"><
前言:v-for渲染的dom元素所依赖的数据为异步加载的数据,id为动态绑定的数据,想在mouted中通过指定id获取dom元素,对其操作。
<div class="equ-message " v-for="(item, index) in data_equlist" id ="item.id"></div>
解决方案:
created中或者mounted生命周期函数中请求数据方法采用ES6的Promise语法,在then()方法中获取指定id的dom元素,对其操作。
示例:
created: function(){ // 这里数据请求方法写在created和mounted中均可以。
this.getAPs().then(()=>{
let str_id = this.currentEqu.device_id;
let currentEquEle = document.getElementById(str_id);
document.getElementById('equList').scrollTop = currentEquEle.offsetTop - 130;
});
}
问题解决过程中的尝试:
起初想在mounted生命周期函数中使用Vue的nextTick获取动态渲染出的dom元素,但是尝试了无法获取,原因应该是获取数据的方法是异步的,js在获取dom元素的时候数据请求还未完成,该元素还未渲染以至于dom树中根本不存在该元素。
更多推荐



所有评论(0)