[已解决]Vue页面中的this.$refs.xxx为undefined

1.页面内容

<div class="qrcode" ref="qrCodeUrl" id="picture"></div>
</div>

2.使用代码

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

3.情况说明

在 2 的使用过程中发现第一次生成二维码，this.$refs.qrCodeUrl的值为undefined，导致报错。

4.解决办法以及说明

（1）ref 是作为渲染结果被创建的，只有等页面加载完成后才能调用this.$refs获取信息。

（2）建议使用 this.$nextTick(_ => {})，在渲染完毕后使用，就可以拿到了。