Vue 3 中的 onKeypress 不捕获数字的最后一个字符

Question

我尝试使用以下代码将输入的数字输入到 Vue 中的函数中。

                     <input 
                        type="number"
                        step="1"
                        class="form-control"
                        placeholder="Enter MyLCI number"
                        required
                        min="1000000"
                        @click.prevent="changeSearch(2)"
                        @keypress="searchLeo"
                        @paste="searchLeo"
                    >

我的函数如下所示。

         searchLeo(e) {
            console.log(e)
            const val = parseInt(e.target.value);
            console.log(val)
         }

当我在输入字段中键入数字时，变量“val”的值总是没有我输入的最后一个数字。例如：如果我输入 123，它只显示 12。但是当我检查 console.log(e) 输出中的 event.target.value 时，它显示的值为 123.

谁能解释一下原因。

Answer 1

按键是指按下按钮，vue 并没有捕捉到那个时刻的值。如果您更改为：

<input 
                        type="number"
                        step="1"
                        class="form-control"
                        placeholder="Enter MyLCI number"
                        required
                        min="1000000"
                        @click.prevent="changeSearch(2)"
                        @keyup="searchLeo"
                        @paste="searchLeo"
                    >

你的代码应该可以正常工作，因为当你完成 key up 时，vue 已经有了它。

Vue 3 中的 onKeypress 不捕获数字的最后一个字符

onKeypress in Vue 3 doesn't capture the last character of number

javascript

forms

vue.js

onkeypress

onpaste