javascript - 如何在按键上获取当前值

Question

我正在使用 vue.js 并在表内创建一个表我有一个输入字段作为 quantity 所以当我输入第一个单词时它在控制台上打印 empty

假设我输入 3 然后显示为空，如果我输入 44 然后它打印 4，我正在使用 v-on:keypress 捕获事件 我不知道这里出了什么问题

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>

Answer 1

您应该使用 keyup 事件处理程序。

KeyPress、KeyUp 和 KeyDown 分别类似于:Click、MouseUp、 和 MouseDown。

1. 向下 先发生
2. 第二次按下(输入文本时)
3. Up 最后发生(当文本输入完成时)。

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>