Vue-Vue中在mounted生命周期中获取dom对象获取不到

Vue中在mounted生命周期中获取dom对象获取不到

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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