-1

我正在使用 Laravel 和 Vuejs 并想使用条形码扫描仪创建发票。除条形码扫描外，一切正常。在这个阶段如何使用条形码扫描仪插入行？在我的代码示例下方。

addNewLine(){
this.form.items.push({
  barcode:null,
  name:null,
  price:0,
  qty:0,
  subtotal:0
})
}

<div<input type="search" v-model="barcode"></div>
<table>
<thead>
<tr>
<th>SL</th>
<th>Barcode</th>
<th>Item Name</th>
<th>Sale Price</th>
<th>Quantity</th>
<th>Subtotal</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in form.items">
<td>{{index + 1}}</td>
<td><input type="text"v-model="item.barcode"/></td>
<td><input type="text"v-model="item.name"/></td>
<td><input type="text"v-model="item.price"/></td>
<td><input type="text"v-model="item.qty"/></td>
<td><input type="text"v-model="item.subtotal"/></td>
</tr>
</tbody>
</table>
<button class="btn btn-sm " @click="addNewLine">Add New Line</button>
4

1 回答 1

1

我已经用 vuejs 实现了一个条码扫描器。

要求：设置条码扫描机在扫描结束时发送“回车”（通常有几个选项）

第一步：在Vue App中，在输入“barcode”中设置焦点

第 2 步：监听事件 @keyup:enter 输入并与组件的方法绑定，例如“addNewItem”。类似<input @keyup:enter="addNewItem" />

第 3 步：在“addNewItem”方法中执行必要的操作，例如自动完成名称、商品价格和其他内容。最后，将您的新项目推送到您的数组“form.items”

因此，当扫描仪机器扫描条形码并发送回车时，您的输入将被条形码填充并调度 keyup enter 事件，因此调用 addNewItem 方法。

于 2020-07-05T00:08:38.243 回答