Autocomplete search with barcode scanner using Laravel & Vuejs - laravel

Question

I am using Laravel & Vuejs & want to create invoice using barcode scanner.everything is working fine except barcode scan. in this stage how to insert row using barcode scanner?
below my code examples.
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

I have implemented a barcode scanner with vuejs.
Requisite: Set the barcode scanner machine to send "enter" at the end of scan (commonly there are several options)
Step 1: In the Vue App, set the focus in the input "barcode"
Step 2: Listen the event #keyup:enter of your input and bind with a method of your component like "addNewItem". Something like <input #keyup:enter="addNewItem" />
Step 3: In the method "addNewItem" do what is necessary, such as autocomplete the name, price of the item and other stuff. Finally, push your new item to your array "form.items"
So, when the scanner machine scan a barcode and send an enter, your input is filled with the barcode and dispatch the keyup enter event so then the method addNewItem is called.