BUG：第一次获取dom失败，点击第二次成功获取

最新推荐文章于 2024-10-07 09:24:46 发布

yqqdmy

最新推荐文章于 2024-10-07 09:24:46 发布

阅读量190

点赞数 2

文章标签： bug javascript 前端

本文链接：https://blog.csdn.net/yqqdmy/article/details/140120276

版权

问题描述：第一次点击按钮打开弹窗，无法获取其中的dom元素，关闭后再次打开成功获取

错误代码如下：

 handlePrints() {
      if(this.printable.length != 0){
        this.printable.forEach((item,index) => {
          this.$nextTick(() => {
              let qrCodeUrl = "qrcode"+index
              console.log("dom",document.getElementById(qrCodeUrl))//第一次获取null
          });
        })
        //控制弹窗是否显示变量
        this.openPrints = true;
      }else{
        this.$message.warning('请选择发货单号')
      }
    },

原因：因为this.$nextTick是将在 DOM 更新完成后被调用,将显示弹窗内容放在该代码之后，导致第一次打开弹窗时，dom发生变化，但是this.$nextTick并没有生效，而是在第二次打开弹窗后才生效

解决办法：将this.openPrints = true代码提到最前面，这样的话打开弹窗dom发生变化，然后再dom更新完成后会调用this.nextTick中的函数

 handlePrints() {
      if(this.printable.length != 0){
         //控制弹窗是否显示变量
        this.openPrints = true;
        this.printable.forEach((item,index) => {
          this.$nextTick(() => {
              let qrCodeUrl = "qrcode"+index
              console.log("dom",document.getElementById(qrCodeUrl))//第一次打开正常获取
          });
        })
       
      }else{
        this.$message.warning('请选择发货单号')
      }
    },