elementui组件el-dialog踩坑

如图，我要实现这样的一个功能每次点击预览都会在弹出框生成一个二维码

完整的实现思路vue
html

  <el-dialog
          title="预览"
          :visible.sync="previewpic"
          v-show="previewpic"
          width="30%"
          style="height: 330px;z-index: 20000"
          class="preqrcode"
        >
          <div slot="footer" class="dialog-footer">
            <div class="qrcode" id="qrcode" ref="qrCodeUrl" style="height: 100px;width: 100px"></div>
            <el-button @click="previewpic = false">取 消</el-button>
            <el-button type="primary" @click="previewpic = false">确 定</el-button>
          </div>
        </el-dialog>

模板数据

data(){
    return {
        previewpic: false//控制dialog框的现实和隐藏
    }
}

js

//触发预览
 handlepreview() {
        //0是编辑，1是复制，没有是新建
        this.previewpic = true
        this.$refs.qrCodeUrl.innerHTML = ''
        var that = this
        if(this.$route.query.iscopy==="0"||this.$route.query.iscopy==="1"){
          //编辑的话直接看
            var qrCode = new QRCode(qrcode, {
              text: `https://sns.91fyt.com/h5/#/pages/ads/ads/?id=${that.$route.query.id}`,
              width: 100,
              height: 100,
              colorDark: '#000000',
              colorLight: '#ffffff',
              correctLevel: QRCode.CorrectLevel.H
            })
}

//注意点
1.

2.qrCode的回调函数this指向函数里面，所以this不能写错
3.每次点击都要清空二维码，否则每次都会渲染一个新的二维码
方法是 this.$refs.qrCodeUrl.innerHTML = ''