vue 使用 el-dialog 获取元素为null的解决方法

 使用vue+element做项目时，需要对 el-dialog 组件内的标签进行dom 操作，但通过document.getElementById()获取元素时总为null。代码如下

<el-dialog
  :title="title"
  :visible.sync="qrcodeVisible"
  v-if="qrcodeVisible"
  :before-close="closeBox"
>
  <div slot="footer">
    <div id="qrcode" style="width:200px;height:200px;margin:0 auto"></div>

    <el-button @click="qrcodeVisible = false" style="margin-top:20px"
      >关闭</el-button
    >
  </div>
</el-dialog>


export default {
    data() {
        qrcodeVisible: false
    },
    methods: {
        open() {
            this.qrcodeVisible = true
            let qrBox = document.getElementById('qrcode')    // qrBox 为 null
        } 
    }
}

造成上述代码中 qrBox 变量为 null 的原因是 el-dialog 中的元素还未渲染完成，所以获取不到 div 元素。

解决方法：使用 vue 的 $nextTick()，代码如下：

open() {
    this.qrcodeVisible = true
    this.$nextTick(function() {
        let qrBox = document.getElementById('qrcode')    // 获取到div元素
    })
}

     

Vue.$nextTick() 接收一个回调函数作为参数，其用法是在下次 DOM 更新循环结束之后执行延迟回调，所以在该延迟回调中的获取元素时DOM都已经渲染完毕，可以拿到元素。

菜鸟一个，有不对的地方欢迎指正，谢谢！