Q:

How to get current value on keypress

I am using vue.js and creating a table inside table I ahve an input field as quantity so when I am typing first word it is printing empty on console
Supose I am typing 3 then is shows empty and if I am typing 44 then it prints 4, I am capturing the event using v-on:keypress I don't know what is 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>

A:

You should use keyup event handler.
KeyPress, KeyUp and KeyDown are analogous to, respectively: Click, MouseUp, and MouseDown.

Down happens first
Press happens second (when text is entered)
Up happens last (when text input is complete).

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:keyup="calculateLineTotal(invoice_product)" />
        </td>

      </tr>
    </tbody>
  </table>
</div>

