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

Posted 2023-02-16

【中文标题】使用 Laravel 和 Vuejs 使用条形码扫描仪自动完成搜索

【英文标题】：Autocomplete search with barcode scanner using Laravel & Vuejs

【发布时间】：2020-10-22 14:08:32

【问题描述】：

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

【问题讨论】：

条码扫描仪是什么意思？是字符串还是数字？在这个例子中究竟是什么不起作用？你得到什么错误或错误？

条码扫描仪是指扫描仪机器。我的问题是如何使用条形码扫描仪插入行（新行）？

【参考方案1】：

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

必需：设置条码扫描机在扫描结束时发送“回车”（一般有几个选项）

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

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

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

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