It takes time to generate the qrcode

[arnonrdp]

I can't understand why, but when I start typing there is a long time to wait until the qrcode is generated.

Please, see: https://qrcode-generator-rho.vercel.app/

My code was basically like this:

<template>
    <div>
        <h1>{{ title }}</h1>
            <div>
                <input type="text" size="25" placeholder="Type..." v-model="text" />
            </div>

            <div v-if="text" class="output">
                <qr-code :text="text"></qr-code>
            </div>
        </div>
</template>

<script>
import VueQRCodeComponent from "vue-qrcode-component";

export default {
    name: "Generator",
    data() {
        return {
            title: "QRCode Generator",
            text: "https://arnon.dev",
        };
    },
    components: {
        "qr-code": VueQRCodeComponent,
    },
};
</script>

Here is the repository: https://github.com/arnonrdp/QRCode-Generator

What am I missing?

[gerardreches]

Hi @arnonrdp !

I see that you moved it to https://codeqr.vercel.app/ and I've checked it there.

The QR code is working and updating correctly in there. It takes a few milliseconds to update, a bit longer than in my demo. I believe this is due to some additional events and javascript functions that you have created for your input field, since it is not the QR code component that takes time to update, but it is instead the input field that takes time to update after pressing the keyboard.

If you check again, you will notice that the QR code is updated at the same time as your introduced character appears in your input field, but you will notice the delay between you actually pressing a key and this action being reflected in your input field.

I hope this helps to find the root of your performance issue.