Vue-Vue中在mounted生命周期中获取dom对象获取不到
作者:互联网
Vue中在mounted生命周期中获取dom对象获取不到
#Dom对象 <RadioGroup v-model="handle_side" type="button" style="width: 150px; margin-left: 15px" @on-change="get_data" id='radiogroup_1' > <Radio label="dev" id='dev'> <span>产品侧</span> </Radio> <Radio label="sec" id="sec" name="sec"> <span>安全侧</span> </Radio> </RadioGroup>
#在mounted阶段获取dom对象 mounted() { this.disableSecRadio(); }, disableSecRadio: function (){ console.log(document.getElementById('radiogroup_1')) }, #此时页面控制台 显示为null
按照Vue官方文档说明,在mounted阶段,模板已经渲染完毕,理应到获取到dom元素,但是实际上并没有。
为了解决获取不到dom元素的问题,查询了相应资料,得到了相关的解决办法---在mounted中添加Vue的全局方法$nextTick---用于DOM加载更新完后进行的一次回调函数性质的操作,如下:
#mounted获取DOM对象 mounted() { setTimeout(()=> { //code this.disableSecRadio(); }, 1000); }, #此时就可以获取到DOM对象了
此时就可以在mounted获取到Dom对象了!!!
相关资料:
vue中 created mounted 动态获取数据渲染后,获取DOM问题
标签:Vue,DOM,对象,dom,获取,mounted 来源: https://www.cnblogs.com/WangGuangYuan/p/16263530.html