其他分享
首页 > 其他分享> > Vue-Vue中在mounted生命周期中获取dom对象获取不到

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