<template>
  <canvas ref="qrcode"></canvas>
</template>

<script>
import QRCode from 'qrcode';

export default {
  name: 'QRCode',
  props: {
    content: {
      type: String,
      required: true
    },
    size: {
      type: Number,
      default: 90
    }
  },  
  data() {
    return {
      qrcode: null
    }
  },
  watch: {
    content: {
      handler(newVal, oldVal) {
        if (newVal !== oldVal) {
          this.generateQRCode();
        }
      },
      immediate: true
    }
  },
  mounted() {
    this.generateQRCode();
  },
  methods: {
    generateQRCode() {
      const el = this.$refs.qrcode;
      const content = this.content;
      QRCode.toCanvas(el, content, {
        width: this.size,
        height: this.size,
        margin: 0
      });
    }
  }
}
</script>