Using v-on:input to change input's v-bind:value doesn't always work as expected

[nicolas-t]

Version

2.6.10

Reproduction link

https://codesandbox.io/s/vue-template-8sl0s?fontsize=14

Steps to reproduce

• Type letters in the first input

What is expected?

State's numericValue should be equal to DOM's input.value

What is actually happening?

State's numericValue and DOM's input.value are different.

---

I am trying to make an input that only accepts numbers as it's value.

In the codesandbox you'll see another exemple with "uppercase" that has the expecting behaviour.

I've openned a topic on forum.vuejs.org with no success :
https://forum.vuejs.org/t/filter-out-letters-from-an-input-to-only-keep-numbers/76205

[posva]

This is working as expected: by filtering out letters before setting myNumericValue, this variable never changes and never triggers a re render, so the value on the input is preserved.

One way to get around this is to force update with this.$forceUpdate() after changing the value. A better way is to reset the input's value only:

const val = $event.target.value.replace(/[^\d]/g, ""); // strips letters, keeps numbers
      if (val === this.numericValue) $event.target.value = val
      else this.numericValue = val

[nicolas-t]

Oh yes !
It was obvious :)

thanks 👍