使用条形码扫描器输入的Vue.js

Question

我在一个网络模块中偶然发现了一个有趣的案例，它是为用户和机器输入(通过条形码扫描仪)设计的。下面是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 ms延迟(扫描程序中的自定义设置)，然后发送keyup.enter，一切正常工作。

最大的问题是:我如何“放慢”扫描仪的输入，而不是调整扫描仪的设置(显然对其他情况不方便)？

诚挚的问候

Answer 1

尝试在这个，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();
      }
    })
  });
}

Answer 2

我会给nextTick一次机会

你可以这样用它：

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