vue使用qrcode报错Cannot read property 'appendChild' of undefined

1.开发环境 vue+vant
2.电脑系统 windows10专业版
3.在使用vue结合qrcode开发的过程中,我们可能会遇到以下报错:Cannot read property 'appendChild' of undefined,下面我来分享以下解决方法,希望对你有所帮助。
4.在template中添加如下代码:

5.在对应的方法中获取 ref的值:

console.log("我是ref的值");
console.log(this.$refs.cqrCodeUrl);
console.log("我是ref的值结束啦");
this.creatQrCode(this.code, this.$refs.cqrCodeUrl);

//你会发现,此时可能会报错,报错信息为:Cannot read property 'appendChild' of undefined

6.报错原因分析:

在这个方法中,里面的$refs还没有开始加载,因为是dom节点还没有渲染好,结局方法如下

7.在对应的方法中添加如下代码:

this.$nextTick(() => {
  console.log("我是ref的值");
  console.log(this.$refs.cqrCodeUrl);
  console.log("我是ref的值结束啦");
  this.creatQrCode(this.code, this.$refs.cqrCodeUrl);
})

8.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。