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

业务场景：后端返回来一个数组，数组中有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>

4.数据内容格式：

data:[
    {
      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.data.length;i++){
            _this.createQrCode(_this.data[i].infoData.fBarCode)
          }
        })
    },
    createQrCode(qrstr){
        //创建二维码
         let qrcodeElementArr = document.getElementsByClassName(qrstr)
         let qrcode = new QRCode(qrstr,{
              width:60,
              height:60,
              text:qrstr
        })
    }
}

6、完整代码

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

<script>
import QRCode from "qrcodejs2"
export default {
    data() {
      return {
        data:[
          {
              infoData:{
                fProductName:'产品1',
                fProductModel:'型号1',
                fFinishedStatus:'未完工',
                fBarCode:'123456'
              }
          },
          {
            infoData:{
              fProductName:'产品2',
              fProductModel:'型号2',
              fFinishedStatus:'未完工',
              fBarCode:'123456677'
            }
          },
          {
            infoData:{
              fProductName:'产品3',
              fProductModel:'型号3',
              fFinishedStatus:'未完工',
              fBarCode:'123123'
            }
          }
        ],
      }
    },
    mounted() {
       this.mutationCallBack()
    },
    methods: {
          mutationCallBack(){
            let _this = this
             //nextTick函数将回调延迟到下次 DOM 更新循环之后执行
            _this.$nextTick(()=>{
              for(let i = 0;i<_this.data.length;i++){
                _this.createQrCode(_this.data[i].infoData.fBarCode)
              }
            })
        },
        createQrCode(qrstr){
            //创建二维码
             let qrcodeElementArr = document.getElementsByClassName(qrstr)
             let qrcode = new QRCode(qrstr,{
                  width:60,
                  height:60,
                  text:qrstr
            })
        }
    }
    
}
</script>