526互联

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

发布时间 2023-03-22 21:15:53作者: ZihangChu

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

使用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
      // })


    },