获取element-ui的dialog中元素为null的问题

在打开弹窗的时候操作DOM,发现获取DOM为null

问题

在这里插入图片描述
如上图所示,在打开弹窗的时候,需要给按钮添加监听事件,上传文件
代码如下

 getFileMD5() {
      const el = document.getElementById("upload-file");
      const bmf = new BMF();
      el.addEventListener(
        "change",
        e => {
          const file = e.target.files[0];
          this.fileInfo.name = file.name;
          this.fileInfo.size = file.size;
          bmf.md5(
            file,
            (err, md5) => {
              this.fileInfo.MD5 = md5;
              console.log(this.fileInfo);
              //上传
              this.postFileHttp(this.fileInfo)
                .then(() => {
                  this.$refs.upload.submit();
                })
                .catch(err => {
                  alert("上传失败" + err.message);
                });
            },
            () => {}
          );
        },
        false
      );
    },

一开始是把控制dialog的变量isFirmwareAddShow放到watch中,只要isFirmwareAddShowtrue的时候,执行getFileMD5函数,结果第一次获取upload-file为空

原因

isFirmwareAddShowtrue的时候,DOM并没有渲染完成

解决方法

el-dialog中增加@opened="getFileMD5"事件
官网说明:

事件名称说明回调参数
openDialog 打开的回调
openedDialog 打开动画结束时的回调
closeDialog 关闭的回调
closedDialog 关闭动画结束时的回调
<el-dialog
      title="添加固件"
      :visible.sync="isFirmwareAddShow"
      width="30%"
      :before-close="closeForm"
      @opened="getFileMD5"
    >
    ...
 </el-dialog>
©️2020 CSDN 皮肤主题: 终极编程指南 设计师:CSDN官方博客 返回首页