this.$nextTick无法获取到this.refs.xxx问题的解决

在做一个打印预览的功能时要通过循环添加要打印的二维码来预览

使用this.$nextTick无法获取更新后的dom,并且二维码在循环后生成也没有生成,因为先循环数组生成二维码的容器,然后再生成二维码。二维码容器的dom在循环后使用this.$nextTic没有获取到,所有二维码自然也生成不了。

最终使用定时器获取dom,二维码也渲染出来了

猜测是因为循环不是v-if那种立刻就会出发dom更新的条件,可能更新的事件在队里里面比nextTick的优先级低,所以使用this.$nextTick获取不到。

有大佬知道原因可以在评论区告诉小弟。

   preview() {
      //打印预览
      for (let i = 1; i <= this.prinForm.num; i++) {
        // this.createCode(this.row)
        this.previewList.push({
          id: `qrcodepriview${i}`
        })
      }
      // this.$nextTick(() => {
      const pretime = setTimeout(() => {
        console.log(this.$refs.previewList)
        for (let i = 1; i <= this.prinForm.num; i++) {
          this.createCode(this.codemsg, `qrcodepriview${i}`)
        }
      })
      this.qrpreview = true
      // })


    },

 

posted @ 2023-03-22 16:32  SadicZhou  阅读(365)  评论(0编辑  收藏  举报