Vue.js 处理来自条形码扫描仪的输入答案

【问题标题】：Vue.js working with input from a barcode scannerVue.js 处理来自条形码扫描仪的输入
【发布时间】：2020-11-07 06:05:30
【问题描述】：

我偶然发现了一个 Web 模块中的有趣案例，该模块专为用户和机器输入（通过条形码扫描仪）而设计。以下是 Vue 模块的代码：

<input 
    class="form-control"
    v-model="barcode"
    id="barcode-scanner"
    @keyup.enter="parseBarcode"
/>


parseBarcode(){
    // validates barcode (string)
    myAPI.getBarcodeId(this.barcode).then(({data}) => {
        if (data.errors) {
            this.showError()
        } else {
            // do some work and focus on input
            this.focusBarcodeInput();
        }
    })
},

扫描器最后可以触发keyup.enter，但是输入条码太快，模型没有更新。只需在输入后添加 10 毫秒延迟（扫描仪中的自定义设置），然后发送 keyup.enter，一切都按预期工作。

最大的问题是：我怎样才能“减慢”扫描仪的输入，而不是调整扫描仪设置（对于其他情况显然不方便）？

最好的问候

【问题讨论】：

你可能想检查setTimeout

标签： javascript vue.js vuejs2 dom-events barcode

【解决方案1】：

尝试在this.$nextTick 中调用它：

parseBarcode () {
  this.$nextTick(() => {
    myAPI.getBarcodeId(this.barcode).then(({data}) => {
      if (data.errors) {
        this.showError()
      } else {
        // do some work and focus on input
        this.focusBarcodeInput();
      }
    })
  });
}

【讨论】：

【解决方案2】：

我会试试nextTick

你可以这样使用它：

parseBarcode(){
    // validates barcode (string)
    myAPI.getBarcodeId(this.barcode).then(({data}) => {
        if (data.errors) {
            this.showError()
        } else {
            this.$nextTick(() => {
               this.focusBarcodeInput();
         });
        }
    })
},

【讨论】：