Autocomplete search with barcode scanner using Laravel & Vuejs

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>

What do you mean by barcode scanner? Is it a string, a number? And what exactly isn't working in this example? What error or errors do you get? — nunop, Jul 02 '20 at 07:58
Barcode scanner mean scanner machine. my question is how to insert row (new line) using barcode scanner? — Aminul, Jul 02 '20 at 09:08

score 1 · Answer 1 · answered Jul 05 '20 at 00:08

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.

Autocomplete search with barcode scanner using Laravel & Vuejs

1 Answers1