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

我有一个二维码创建页面。我希望通过用户输入动态创建二维码。但我不想立即创建二维码。我想等待我的用户完成写作，然后在一秒钟后，我将生成二维码。因此，我有一个如下所示的模板：

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

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

您必须使用修改器：

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

---

这是基于此,

浏览器如何判断用户是否真的完成了，或者只是在考虑输入其他内容？这不是思考：）而是完成“写作”。我不在乎他/她停止写作的原因。我只是关心他/她是否停止。我想说的是，除非通过一些明确的用户操作，比如关注另一个元素，否则是不可能检测到的。嗯。我试着用一种改变的方法。但异步等待逻辑不起作用。那么，使用onchange真的不可能或者您有什么想法来实现它吗？watch方法的作用类似于变化。这种方法很有效。但它要求用户将注意力集中在其他地方。如果OP表示用户正在“完成”，则此操作将起作用。@Mansur请检查第二个建议

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