动态生成二维码并显示在页面上动态刷新

动态生成二维码并显示在页面上动态刷新

业务场景：后端传回来一组数据，数据内容是一个数组中有n个对象，对象的其中一个属性是一串字符串类型的数字，现在需要将这个数字都转为二维码，并显示在页面上。
效果：

字符串转二维码需要用到 qrcodejs2插件
1.安装插件 npm install qrcodejs2 --save
2.在javascript中 引入 import QRCode from ‘qrcodejs2’`
3.Html中

<div class="box-card" v-for="(item,index) in data" :key="index" >
<!--展示二维码的容器-->
<div class="qrcode" :id="item.infoData.fBarCode"></div>
</div>

注：中间的div class=“qrcode” 是转换为二维码的div容器，Id必须跟下方的转换函数中对应，id是动态的所以用 :id
4.数据内容格式：

infoDataArr:[
            {
              infoData:{
                fProductName:'产品1',
                fProductModel:'型号1',
                fFinishedStatus:'未完工',
                fBarCode:'123456'
              }
              },
              {
                infoData:{
                  fProductName:'产品2',
                  fProductModel:'型号2',
                  fFinishedStatus:'未完工',
                  fBarCode:'123456677'
                }
              },
              {
                infoData:{
                  fProductName:'产品3',
                  fProductModel:'型号3',
                  fFinishedStatus:'未完工',
                  fBarCode:'123123'
                }
              }
          ],

5.调用生成图片函数
$nextTick()函数 在修改数据之后使用这个方法，立即更新dom

mounted() {
       this.mutationCallBack()
    }
methods: {
      mutationCallBack(){
        let _this = this
         //nextTick函数将回调延迟到下次 DOM 更新循环之后执行
        _this.$nextTick(()=>{
              for(let i = 0;i<_this.infoDataArr.length;i++){
                _this.createQrCode(_this.infoDataArr[i].infoData.fBarCode)
              }
            })
      },
createQrCode(qrstr){
    //创建二维码
     let qrcodeElementArr = document.getElementsByClassName(qrstr)
     let qrcode = new QRCode(qrstr,{
          width:60,
          height:60,
          text:qrstr
        })
      }
}