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

I tried to get the entered number in to a function in Vue with the following code.

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

And my function looks like below.

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

When I type a number in the input field, always the value of the variable "val" comes without the last number I entered. Ex: if I enter 123, it shows only 12. But when I check the event.target.value from console.log(e) output, it shows the value as 123.

Can someone please, explain the reason.

CodePudding user response：

Key press is reference to press the button, and the vue doesnt catch the value at that moment. If you change for:

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

Your code should works fine, because when you have done the key up, the vue already has it.