VUE中,HTML对象的ID动态绑定,在mounted中根据ID无法获取到对象
页面如下:<template><div :id="objId" class="randomBoxDiv" :style="stylesBox"></div></template>其中,div的ID是动态绑定的。JavaScrip
·
页面如下:
<template>
<div :id="objId" class="randomBoxDiv" :style="stylesBox">
</div>
</template>
其中,div的ID是动态绑定的。
JavaScript代码如下:
<script>
export default {
data() {
return {
objId: ""
};
},
mounted: function() {
this.initParm(); //参数初始化
console.log($(".randomBoxDiv"));
console.log(this.objId);
console.log($("#"+this.objId));
},
methods:{
initParm: function(){
this.objId=this.getUid();
},
getUid: function() {
function S4() {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
}
return "tagdiv" + S4() + S4() + S4() + S4();
}
}
}
</script>
浏览器console打印出来的对象,ID已经设置上了,但是用ID获取对象却获取不到。查资料以后发现,这跟vue的渲染顺序有关,在mounted执行时,dom其实并没有渲染完成,所以,在mounted中用动态的ID获取对象是获取不到的。解决方式即是用vue提供的$nextTick,如下:
mounted: function() {
this.initParm(); //参数初始化
console.log($(".randomBoxDiv"));
console.log(this.objId);
//把动态获取ID的操作放到this.$nextTick的回调中执行即可
this.$nextTick(() => {
console.log($("#"+this.objId));
}
}
$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM。
以上,留做记录。
更多推荐
已为社区贡献4条内容
所有评论(0)