-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 でバーコード スキャナーを実装しました。

前提条件: スキャンの最後に「入力」を送信するようにバーコード スキャナー マシンを設定します (通常、いくつかのオプションがあります)。

ステップ 1: Vue アプリで、入力「バーコード」にフォーカスを設定します

ステップ 2: 入力のイベント @keyup:enter をリッスンし、「addNewItem」などのコンポーネントのメソッドにバインドします。<input @keyup:enter="addNewItem" />のようなもの

ステップ 3: メソッド「addNewItem」で、名前、アイテムの価格、その他のものをオートコンプリートするなど、必要なことを行います。最後に、新しいアイテムを配列「form.items」にプッシュします

そのため、スキャナ マシンがバーコードをスキャンしてエンターを送信すると、入力にバーコードが入力され、keyup エンター イベントがディスパッチされるため、メソッド addNewItem が呼び出されます。

于 2020-07-05T00:08:38.243 に答える