Vue.component("qr", {
    template: '<div ref="qr" v-show="this.value !== \'\'"></div>',
    name: 'qr',
    props: {
        value: [String, Number],
        width: {
            "type": Number,
            "default": function () {
                return 128;
            }
        }
    },
    watch: {
        value: {
            immediate: true,
            handler: function (value) {
                if (this.qrcode) {
                    this.qrcode.makeCode(value + "");
                }
            }
        }
    },
    mounted: function () {
        this.qrcode = new QRCode(this.$refs.qr, {
            text: this.value + "",
            width: this.width,
            height: this.width
        });
    },
    methods: {
        handleChange: function (e) {
            this.$emit("change", this.checked, e);
        }
    }
});