标签：Vue DOM 对象 dom 获取 mounted

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。