Question

我正在使用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>

Answer 1

我已经用vuejs实现了条形码扫描仪。

必需：设置条形码扫描仪机器，使其在扫描结束时发送“ enter”（通常有多个选项）

步骤1：在Vue应用中，将焦点设置在输入的“条形码”中

第2步：侦听输入的事件@keyup：enter并绑定组件的方法，例如“ addNewItem”。

之类的东西

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

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

使用Laravel和Vuejs使用条形码扫描仪进行自动完成搜索

1 个答案: