Error in created hook: “TypeError: Cannot read properties of undefined (reading ‘appendChild‘)“

调用this.$QRCode时报：Error in created hook: "TypeError: Cannot read properties of undefined (reading 'appendChild')"问题代码：creatQrCode() {var that = thisvar qrcode = new that.$QRCode(that.$refs.qrCodeUrl, {

chen_XiaoFang

8982人浏览 · 2022-05-27 20:31:02

chen_XiaoFang · 2022-05-27 20:31:02 发布

调用this.$QRCode时报：Error in created hook: "TypeError: Cannot read properties of undefined (reading 'appendChild')"

问题代码：

creatQrCode() {
        var that = this
        var qrcode = new that.$QRCode(that.$refs.qrCodeUrl, {
          text: '5201314', // 需要转换为二维码的内容
          width: 100,
          height: 100,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: that.$QRCode.CorrectLevel.H
        })
      },

原因：

that.$refs取不到所指定的对象

解决方法：

通过

setTimeout(() => {
 
　　　　}, 0)

来解决

参考：关于vue中ref的使用(this.$refs获取为undefined)

改为：

creatQrCode() {
        var that = this
        setTimeout(() => {
              var qrcode = new that.$QRCode(that.$refs.qrCodeUrl, {
                  text: '5201314', // 需要转换为二维码的内容
                  width: 100,
                  height: 100,
                  colorDark: '#000000',
                  colorLight: '#ffffff' ,
                  correctLevel: that.$QRCode.CorrectLevel.H
              })
        　　　　}, 0)
      },