While working with vue.js, I'm building a table that contains an input field called quantity. However, when I start typing the first word, it shows 'empty' on the console.
If I type 3, it displays empty; and if I type 44, it prints 4. I am handling the event using v-on:keypress, but I can't figure out what's going wrong here.
var app = new Vue({
el: "#app",
data: {
invoice_products: [{
product_no: '',
product_name: '',
product_price: '',
product_qty: '',
line_total: 0
}]
},
methods: {
calculateLineTotal(invoice_product) {
console.log(invoice_product.product_qty)
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.6/vue.js"></script>
<div id="app">
<table>
<thead>
<tr>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr v-for="(invoice_product, k) in invoice_products" :key="k">
<td>
<input class="form-control text-right" type="number" min="0" step=".01" v-model="invoice_product.product_qty" v-on:keypress="calculateLineTotal(invoice_product)" />
</td>
</tr>
</tbody>
</table>
</div>