关于element组件dialog无法获取里面元素的问题

关于element组件dialog无法获取里面元素的问题

直接上代码

<template>
  <div>
    <el-button @click="qqq" type="primary">111</el-button>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span id="qqq">这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible:false
    }
  },
  methods: {
    qqq(){
      this.dialogVisible = true
      let info1 = document.getElementById('qqq')
      console.log(info1)       //这边获取的也是null
      // dialog展示出来的时候
      this.$nextTick(()=>{
        let info2 = document.getElementById('qqq')
        console.log(info2)     //这边能获取到
      })
    }
  },
  created() {
    
  },
  mounted() {
    let info = document.getElementById('qqq')
    console.log(info)          //这边获取的是null
  },
}
</script>
<style lang="less" scoped>

</style>

这边我不管在哪里获取dialog里面的元素都为null，查阅资料发现，原来dialog里面的body是懒加载的，且看图片

在我还没有打开dialog的时候，里面只有el-dialog__header和el-dialog__footer

在我打开的时候他就出来了

所以我最后的解决办法是，加this.$nextTick（在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进nextTick()的回调函数中），注意，这里是在打开之后加，在mounted里面加还是不行的

作为自己学习过程的总结，菜鸡一枚，有什么问题与错误，请不吝赐教