SoFunction
Updated on 2025-04-04

Simple example of using qrcodesjs2 to generate QR codes in vue project

Recently, when I encountered a requirement for writing a project, I needed to generate a QR code. I looked at the use of qrcodesjs2 to generate QR codes in the project, and the operation is relatively simple. A brief record here

Use qrcodesjs2 to generate QR codes in vue project

Install

npm i qrcodejs2 -S

html

<!-- A container for placing QR codes,Need to give oneref -->
 <div v-for="(item,i) in qrcode" :key="i">
 	<div  :ref="qrcode[i]"></div>
 <div>

Multiple QR codes need to be printed in the project, and this is more general, whether you print a single or multiple

js

// Generate QR code   printTwoCode(width) {
       for (let j in ) {
           let code = [j]; // QR code content           new QRCode(this.$refs[`${[j]}`][0], {
               text: code,
               render: 'canvas',
               width: width,
               height: width,
               colorDark: '#000000',
               colorLight: '#ffffff'
           });
       }
   },

Clear

for (let j in ) {
       this.$[j][0].innerHTML = ''
  }

use

this.$nextTick(() => {
     (130);
 });

Attachment: Use qrcodejs2 to generate multiple QR codes

First install qrcodejs2

Then quoteimport QRCode from 'qrcodejs2'

<div class="box">
    <div v-for="(item, index) in list" class="boxscod" :key="index">
      <div : :ref="`code${}`" class="qrcode">
      </div>
      <div class="abc">
          <span class="cargo-wrap">{{  }}</span>
          <span class="cargo-cardNo">{{  }}</span>
        </div>
    </div>
  </div>
return {
      list: [
        { id: '01', idCard: 15336 },
        { id: '02', idCard: 18528 },
        { id: '03', idCard: 78542 },
        { id: '04', idCard: 46824 },  
      ],
    };
mounted() {
    ();
  },
  methods: {
    creatQrCode(id, code) {
      (code);
      (typeof code);
      var qrcode = new QRCode(id, {
        text: encodeURI(code), // Content that needs to be converted to QR code        width: 70,
        height: 70,
        colorDark: "#000000",
        colorLight: "#ffffff",
        // correctLevel: ,
      });
      (qrcode);
    },
    // Show QR code    showCode() {
      //   ()
      this.$nextTick(() => {
        ((item) => {
          //   if ( === 1 ||  === 2) {
          ("code" + , );
          //   }
        });
      });
    },
  },

Summarize

This is the article about using qrcodesjs2 to generate QR codes in the vue project. For more related contents of using qrcodesjs2 to generate QR codes in vue, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!