等待，直到用户完成对Vue.js中输入字段的写入

Question

我有一个二维码创建页面。我希望我的二维码是由用户输入动态创建的。但我不想立即创建一个二维码。我想等待我的用户写完，然后一秒钟后我将生成二维码。所以我有一个类似下面的模板：

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

还有我的脚本：

import QrcodeVue from 'qrcode.vue';

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

            this.isInputFunctionRunning = true;

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

            this.genaratedQrCode = this.qrCodeInput;

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

显然，代码不起作用。它每隔一秒生成一次二维码。我想要的是等待，直到用户完成，然后更新后1秒。

Answer 1

您必须使用.lazy修饰符：

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

如果你想等待一些延迟，试着这样做：

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,
    },
}

这是基于这个answer的；