javascriptformsvue.jsonkeypressonpaste

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


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.


Solution

  • 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.