Size not reactive

[jAlfredsson]

I'm using a computed property for the size prop, but it seems as the QR code is not updating reactively to the size prop..

Component:
<qr-code :text="product.product_uid" error-level="L" :size="qr_size" />

Computed:
qr_size(){ return (this.dimensions.height - 10) < (this.dimensions.width / 2 - 10) ? (this.dimensions.height - 10) : (this.dimensions.width / 2 - 10) }

Thankful for any help (and for a great component!! )

[gerardreches]

Hi @jAlfredsson ,

I haven't been working with Vue.js or any other JS frameworks for a while, so my knowledge is quite rusty right now, excuse me for that.

It seems that I only made the text property reactive, so it's probably just about adding a watcher for the size property as well. Unfortunately this would take me a lot of time that I don't have for now, since I don't have an environment ready to test it nor my memory fresh enough on how to use webpack.

The code required to make it reactive shouldn't be complicated though, so if you want to give it a try by modifying the file from this component downloaded in your project, go ahead, I'll provide you with the code I think that would work and then you can test it and tell me, then I would update the repository (I can also accept Pull requests for this).

Please, replace the code with the following one, compile, give it a try and report back:

<template>
    <div></div>
</template>

<script>
    import QRCode from '@keeex/qrcodejs-kx'
    export default {
        props: {
            text: {type: String, required: true},
            size: {type: Number, required: false, default: 256},
            color: {type: String, required: false, default: '#000'},
            bgColor: {type: String, required: false, default: '#FFF'},
            errorLevel: {
                type: String, 
                validator: function (value) {
                    return value === 'L' || value === 'M' || value === 'Q' || value === 'H'
                }, 
                required: false, 
                default: 'H'
            }
        },
        watch: {
            text: function () {
                this.clear();
                this.makeCode(this.text);
            },
            size: function () {
                this.generateCode();
            }
        },
        data() {
            return{
                qrCode: {}
            }
        },
        mounted() {
            this.qrCode = this.generateCode();
        },
        methods: {
            clear: function () {
                this.qrCode.clear();
            },
            makeCode: function (text) {
                this.qrCode.makeCode(text);
            },
            generateCode: function () {
                this.qrCode = new QRCode(this.$el, {
                    text: this.text,
                    width: this.size,
                    height: this.size,
                    colorDark : this.color,
                    colorLight : this.bgColor,
                    correctLevel : QRCode.CorrectLevel[this.errorLevel]
                });
            }
        }
    }
</script>

These changes should do the trick.

Nevertheless, the QR code can be resized with CSS without losing quality, so that is an option you already have available at this time and that it may be viable for you depending on your code.

Thank you for your collaboration 😄

[jAlfredsson]

Hello @gerardreches !
Doing anything else with node modules than npm install is way above something I've ever dared trying ;)

However I gathered some courage and tried your suggestion.. It "sort of" works but it doesnt clear the old QR code.. so it adds "more" QR codes to the root element this.$el when done this way.. I played around a bit with trying to clear or remove the old one but without any success.. I will take your advice and do it the css way, Sorry I couldnt' help more!

[gerardreches]

Hello @gerardreches ! Doing anything else with node modules than npm install is way above something I've ever dared trying ;)

However I gathered some courage and tried your suggestion.. It "sort of" works but it doesnt clear the old QR code.. so it adds "more" QR codes to the root element this.$el when done this way.. I played around a bit with trying to clear or remove the old one but without any success.. I will take your advice and do it the css way, Sorry I couldnt' help more!

I see! Thanks for trying it out.

If you want, you may try again with this new code and tell me if this time the old QR code is cleared out:

<template>
    <div></div>
</template>

<script>
    import QRCode from '@keeex/qrcodejs-kx'
    export default {
        props: {
            text: {type: String, required: true},
            size: {type: Number, required: false, default: 256},
            color: {type: String, required: false, default: '#000'},
            bgColor: {type: String, required: false, default: '#FFF'},
            errorLevel: {
                type: String, 
                validator: function (value) {
                    return value === 'L' || value === 'M' || value === 'Q' || value === 'H'
                }, 
                required: false, 
                default: 'H'
            }
        },
        watch: {
            text: function () {
                this.clear();
                this.makeCode(this.text);
            },
            size: function () {
                this.clear();
                this.generateCode();
            }
        },
        data() {
            return{
                qrCode: {}
            }
        },
        mounted() {
            this.qrCode = this.generateCode();
        },
        methods: {
            clear: function () {
                this.qrCode.clear();
            },
            makeCode: function (text) {
                this.qrCode.makeCode(text);
            },
            generateCode: function () {
                this.qrCode = new QRCode(this.$el, {
                    text: this.text,
                    width: this.size,
                    height: this.size,
                    colorDark : this.color,
                    colorLight : this.bgColor,
                    correctLevel : QRCode.CorrectLevel[this.errorLevel]
                });
            }
        }
    }
</script>

I simply added a call to clear the current QR code when the size prop changes. I don't know if you have already tried it, but if not, give it a try :)