feat(model): add .eager modifier to v-model

[posva]

Add an .eager modifier to v-model that ignore composing value on the input and eagerly modify the value while the user is still composing a value. #9299 #9777. See the rationale behind this at https://github.com/vuejs/vue/issues/9777#issuecomment-478831263

Since the default keyboard on Android, GBoard, does composing by default, I think it makes sense to have a modifier to disable the composing behaviour while still benefitting from using v-model.

What kind of change does this PR introduce? (check at least one)

• [ ] Bugfix
• [x] Feature
• [ ] Code style update
• [ ] Refactor
• [ ] Build-related changes
• [ ] Other, please describe:

Does this PR introduce a breaking change? (check one)

• [ ] Yes
• [x] No

If yes, please describe the impact and migration path for existing applications:

The PR fulfills these requirements:

• [x] It's submitted to the dev branch for v2.x (or to a previous version branch), not the master branch
• [x] When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)
• [x] All tests are passing: https://github.com/vuejs/vue/blob/dev/.github/CONTRIBUTING.md#development-setup
• [x] New/updated tests are included

If adding a new feature, the PR's description includes:

• [ ] A convincing reason for adding this feature (to avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it)

Other information:

[golber9]

Do you have a forecast of when it will be released? Thanks

[ghost]

Thanks for the PR, @posva! I hope that feature be approved soon. Don't forget to put a note in the docs or new issues will be created mentioning this issue. I guess that the site of Vue.js should have a section talking about known issues pointing to links so the users should read there first before create new issues if there's nothing created before (like stackoverflow does), it avoids duplicated topics.

@nolimitdev, I hope you read this PR. I think there's no better solution than that. Thank you for contribuition in #8231!

[nolimitdev]

@lvfxbr One thing I do not understand... how it is possible that in old VUE 1 v-model works well out of the box on android device during auto prediction... I mentioned it in #8231 in 2018y but got no reaction and today most favourite comment in #8231 was incomprehensibly removed by maintainer. I noticed this bug a long time ago during migration from VUE 1 to VUE 2. Please test someone it in old VUE 1 and confirm that it works or not. So v-model can technically work on VUE 1 but can not on VUE 2 and VUE 3? Maybe Im missing something I did not read source code what is the difference.

[ghost]

@nolimitdev, I did a test in latest update of Vue 1 (1.0.28) from 2016. I created a repository to test this here, I tested in my smartphone and really, the v-model works fine:

This is the branches I created for compare the vue versions: https://github.com/lvfxbr/vue-tests/branches

This is the live tests, everyone can test it in mobile: https://codesandbox.io/s/test-vue1-v-model-in-mobile-6yeq3 https://codesandbox.io/s/test-vue2-v-model-in-mobile-gq5pj

We can investigate what changed Vue 1 to Vue 2.

[guska8]

Hey guys, i've been wondering if this .eager feature is gonna come out? thank you EDIT: so i was trying to make a input that executes a search while the user types on mobile and fixed based on sming comment: https://forum.vuejs.org/t/why-is-my-value-inside-event-and-not-event-target-value/12737/7

<my-component
        :value="text"
        :placeholder="placeholder"
        @input.native="handleInput"
/>

props: {
    value: {
      type: String,
      default: ''
    }
},

methods: {
    handleInput (event) {
      if(e.isComposing){
        // if button delete from mobile is pressed
        if(e.target.value === ''){
          this.text = this.query.slice(0, -1)
        }else{
          this.text = e.target.value
        }
      }else{
        this.text = e.target.value
      }
  }
}

the .eager would be better but i hope it helps while it's not released

[CyberAP]

For those who are still waiting for the fix and don't want to replace v-model with an input event here's the solution to force .eager mode:

<input v-model="myModel" @input="$event.target.composing = false">

[nolimitdev]

@posva did you please noticed @lvfxbr 's comment https://github.com/vuejs/vue/pull/9814#issuecomment-698588240 ? Thanks. It seems that no .eager is needed just to investigate how it is possible that VUE v1 did not have this bug but v2 and v3 has.

[rightaway]

Will this be fixed in Vue 2 or 3? Anything we can do to help this get merged?

[clawrence121]

For those who are still waiting for the fix and don't want to replace v-model with an input event here's the solution to force .eager mode:

<input v-model="myModel" @input="$event.target.composing = false">

This worked for me using Nuxt 2.15!

[inlandfx]

For those who are still waiting for the fix and don't want to replace v-model with an input event here's the solution to force .eager mode:

<input v-model="myModel" @input="$event.target.composing = false">

This worked for me using Nuxt 2.15!

Worked like a charm

[CyberAP]

@yyx990803 would it be possible for this PR to make it into 2.7?

[mryellow]

It would appear that v-model is broken and does not work on mobiles when applied to non-component elements.

Either the documentation is wrong or the functionality is wrong.

However it seems all these issues are being pushed into the "It's all your fault stupid user" basket instead of the problem being solved. Complete with reports of this issue being prematurely closed. Meanwhile potential solutions are left to go stale.

This issue could be better handled.

It is not working as intended and reports of such are continually being obstructed