vue中dialog组件中我这样写为什么这样渲染不出

Question

难道是dialog在未显示状态，抓不到dom的问题吗？

//我拿到数据生成一个二维码
success: (res) => {
    let cxt = res
    let payCode
    if (cxt.status == 1) {
        payCode = cxt.data.code_url
        $('.qr_container').qrcode({
            render: "canvas",
            height: 264,
            width: 264,
            correctLevel: 0,
            text: payCode
        });
        setTimeout(() => {
            this.qrcode = true //dialog显示
        }, 300)
    } else {
        this.toast(cxt.detail)
    }
},



//这里不行
<el-dialog class="qrcode add-add" title="微信支付" :visible.sync="qrcode" width="370px" center>
    <div class="qr_container" style="margin:auto; position:relative;"></div>
</el-dialog>

//单独写在外面测试是可以的
<div class="qr_container" style="margin:auto; position:relative;height: 264PX;width: 264PX;border: 1px solid #000;"></div>

Answer 1

是的，没显示dialog就是没有dom

Answer 2

先设置

 this.qrcode = true

再等窗口dom渲染后进行qrcode方法 生成二维码。

Answer 3

先显示弹框让其dom渲染，然后等待其渲染完成再生成qrcode插入

this.qrcode=true
this.$nextTick(()=>{
    // qrcode生成
})