如何在按键上获取当前值
如何在按键上获取当前值
提问于 2019-12-05 08:42:50
我使用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>
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-12-05 08:50:22
您应该使用keyup事件处理程序。
KeyPress、KeyUp和KeyDown分别类似于：Click、MouseUp,和MouseDown。
Down发生firstPress第二次发生(当文本是entered)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>
Stack Overflow用户
发布于 2019-12-05 08:50:47
您的问题是，在输入字段中处理键之前，按下键时会触发on keypress事件；原因是允许您的事件进程函数捕获它并最终将其过滤掉。这就是为什么这个领域还没有显示正确的结果，因为它还没有“看到”关键。
因此，您需要的解决方案是更改您的逻辑，以捕获keyup事件，该事件将在焦点字段中输入键后触发。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59191213
复制相关文章
相似问题
腾讯云开发者
