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

Question

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

<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；