Waiting for the user to complete their input in a Vue.js input field

Question

Waiting for the user to complete their input in a Vue.js input field

I have a unique QR code generator on my website. I would like the QR codes to be generated dynamically based on user input, but not instantly. Instead, I want to wait for the user to finish typing before generating the QR code after one second. Here is the template for my setup:

<div class="app">
    <qrcode-vue :value="generatedQrCode"></qrcode-vue>
    <input type="text" v-model="qrCodeInput" />
</div>

Below is the script I am using:

import QrcodeVue from 'qrcode.vue';

export default {
    data() {
        return {
            generatedQrCode: '',
            qrCodeInput: '',
            isInputFunctionRunning: false
        }
    },
    watch: {
        async qrCodeInput() {
            if (this.isInputFunctionRunning) {
                return;
            }

            this.isInputFunctionRunning = true;

            await new Promise(r => setTimeout(r, 1000));

            this.generatedQrCode = this.qrCodeInput;

            this.isInputFunctionRunning = false;
        }
    }
    components: {
        QrcodeVue,
    },
}

However, it seems that the code is not functioning as intended. It is generating the QR code every second instead of waiting for the user to finish typing. My goal is to update the QR code only after the user has finished typing and one second has passed.

javascript vue.js asynchronous vuejs2 vue-component

Answer 1

Answer №1

To properly handle input with a delay, the .lazy modifier should be used :

<input type="text" v-model.lazy="qrCodeInput" />

If a delay is desired before executing a function, consider implementing this debounce function:

import QrcodeVue from 'qrcode.vue';

function debounce (fn, delay) {
  var timeoutID = null
  return function () {
    clearTimeout(timeoutID)
    var args = arguments
    var that = this
    timeoutID = setTimeout(function () {
      fn.apply(that, args)
    }, delay)
  }
}



export default {
    data() {
        return {
            genaratedQrCode: '',
            qrCodeInput: '',
            isInputFunctionRunning: false
        }
    },
    watch: {
        qrCodeInput:debounce(function() {
            if (this.isInputFunctionRunning) {
                return;
            }

            this.isInputFunctionRunning = true;

            this.genaratedQrCode = this.qrCodeInput;

            this.isInputFunctionRunning = false;
        },1000)
    }
    components: {
        QrcodeVue,
    },
}

This solution was inspired by the guidance provided in this answer;

Answer 2

To properly handle input with a delay, the .lazy modifier should be used :

<input type="text" v-model.lazy="qrCodeInput" />

If a delay is desired before executing a function, consider implementing this debounce function:

import QrcodeVue from 'qrcode.vue';

function debounce (fn, delay) {
  var timeoutID = null
  return function () {
    clearTimeout(timeoutID)
    var args = arguments
    var that = this
    timeoutID = setTimeout(function () {
      fn.apply(that, args)
    }, delay)
  }
}



export default {
    data() {
        return {
            genaratedQrCode: '',
            qrCodeInput: '',
            isInputFunctionRunning: false
        }
    },
    watch: {
        qrCodeInput:debounce(function() {
            if (this.isInputFunctionRunning) {
                return;
            }

            this.isInputFunctionRunning = true;

            this.genaratedQrCode = this.qrCodeInput;

            this.isInputFunctionRunning = false;
        },1000)
    }
    components: {
        QrcodeVue,
    },
}

This solution was inspired by the guidance provided in this answer;

Waiting for the user to complete their input in a Vue.js input field

Answer №1

Similar questions

Limitations of Typescript's Index Signature Templates

Adjusting the waterlevel model attribute to its standard value

Why delay for asynchronous web service requests?

Extract information from an array located inside a nested object

Generating unique spreadsheet identifiers in an HTML file

Vue.js does not have the ability to toggle a font-awesome icon

Error: Cannot locate module: Vue not found, incorrect path specified

Using AngularJS to auto-fill input and textarea fields

Tips for creating a for loop in a .js script within MongoDB that allows for passing a variable containing the database name to a text file

The AngularJS framework does not support the Twitter Collection Grid feature

Tips for inserting a new choice into the v-select component of Vuetify

Nuxt - Auth module: Securely authenticating server-side requests

Looping through a dynamic array in Vue.js

Print the content from the selected tab in AngularJS UI tab

Instructions for creating a scrollable unordered list when it reaches its maximum capacity

Eliminating certain buttons within Ember-leaflet-draw

Struggling to apply the onclick function to an HTML element

The value within the style.setProperty function does not get applied

Unable to properly utilize environment variables on Vercel when using Nuxt framework

make the text in em font size larger