VUE中，HTML对象的ID动态绑定，在mounted中根据ID无法获取到对象

本文主要是介绍VUE中，HTML对象的ID动态绑定，在mounted中根据ID无法获取到对象，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

页面如下：

<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。

以上，留做记录。

这篇关于VUE中，HTML对象的ID动态绑定，在mounted中根据ID无法获取到对象的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---