Vue: v-model behaves inconsistently in comparison to docs

[richrd]

Version

2.5.17

Reproduction link

https://vuejs.org/v2/guide/forms.html#Text

Steps to reproduce

First off, the docs claim here that using v-model is identical to using v-bind:value="searchText" and v-on:input="searchText = $event.target.value".

It does have the same behavior on desktop, but with chrome on android the behavior is different. When using v-model on android/chrome the model only gets updated when pressing space, enter, backspace or unfocusing the field (and maybe in some other cases). The model does not update when in the middle of typing a word. However when using v-bind and v-on:input the model gets updated as it is supposed to.

It seems like v-model isn't binding the input event on android. The correct behavior can be achieved by adding v-on:input regardless of whether v-model or v-bind:value is used. This applies to input and textarea elements.

What is expected?

The behavior is expected to be the same on all platforms: The model should update live with every keypress.

What is actually happening?

On chrome on android the model isn't updated on every keypress. This can be reproduced with the example inputs that are shown in the docs.

---

This is a problem when for example creating a list that should be filtered live with user input. I'm wondering whether this is a bug or a documentation issue. I feel like it's a bug since the same code has different behavior on different platforms.

[posva]

it's talking about v-model in components which is indeed what is explained but is different from input's v-model

---

Please, next time consider using the forum, the Discord server or StackOverflow for questions first. But feel free to come back and open an issue if it turns out to be a bug 🙂

[xPaw]

@posva Then why does the documentation talk about v-model in input?

As per the report, input model is not immediately updated on Android when typing. There's plenty of issues reported in Vue regarding this specific use case already. Either the documentation needs to be updated to reflect that or Vue internally should handle it better.

It automatically picks the correct way to update the element based on the input type.

This doesn't particularly sound correct to me.

[richrd]

I did search for this quite a bit. I also agree that at least the docs could be updated as this is a very unexpected inconsistency. The example text input in the docs (reproduction link) behaves differently on android/chrome compared to desktop/chrome. For the record Angular 2 and above has no such issue (regardless of composition mode)

[richrd]

I see this is what the docs say about this:

For languages that require an IME (Chinese, Japanese, Korean etc.), you’ll notice that v-model doesn’t get updated during IME composition. If you want to cater for these updates as well, use input event instead.

Why is this also happening for English and other languages that don't require IME? Is IME the same as autocomplete/word suggestions, because disabling those gives me the desired behaviour.

[danstewart]

Made a PR to add this to the documentation here: https://github.com/vuejs/vuejs.org/pull/1798