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问题