vue中在dialog中使用canvas提示 Cannot read property ‘getContext‘ of null“

问题

在dialog中使用画布canvas的时候会提示报错Cannot read property ‘getContext’ of null"

<el-dialog :visible.sync="dialog" :title="dialogTitle" append-to-body width="85%">
  <canvas id="canvas" width="400px" height="400px"></canvas>
</el-dialog>

解决方法

在获取的方法里面加上this.$nextTick(),具体代码如下所示：

this.dialog=true
// 将获取canvas的相关代码放在$nextTick里面
this.$nextTick(()=>{
      const canvas = document.getElementById('canvas')
      const ctx = canvas.getContext('2d')
})

原因

涉及知识点

this.$nextTick()的作用：将回调延迟到下次 DOM 更新循环之后执行

具体解释

当dialog打开时，这时候canvas有可能并没有被渲染出来，这个时候去获取canvas元素，理所应当会报错；
而this.$nextTick()在这里实际上指的是等待dialog里面的canvas渲染完，再去执行里面的代码
同理，其它元素的获取提示错误也是这个道理。