我正在使用 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>
最佳答案
您应该使用 keyup
事件处理程序。
KeyPress
、KeyUp
和 KeyDown
分别类似于:Click
、MouseUp、
和 MouseDown
。
向下
首先发生按下
第二次发生(输入文本时)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>
关于javascript - 如何获取按键的当前值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59191213/