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

Question

我在 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，一切都按预期工作。

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

此致

Answer 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();
      }
    })
  });
}

Answer 2

我会nextTick试一试

你可以这样使用它：

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

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

Vue.js working with input from a barcode scanner

javascript

barcode

dom-events

vue.js

vuejs2