v-model not update when use the Chinese input method

[jiangtao]

中文输入法导致 v-model 的值不更新

代码：http://jsbin.com/robetuzuxo/edit?html,js,output
demo: http://output.jsbin.com/robetuzuxo

当用手机浏览器打开 demo 后，点击 input 输入框，切换至中文输入法，随便输入，然后直接点击 submit 按钮（不要点击完成或者 done），发现 v-model 的值没有更新，但是通过原生方法找到 input 的 value，发现 value 值是更新过的，这种情况要怎么处理？目前我们的解决方案是重新封装一个 input component 出来，但是以前的上线的全部业务现在出现这种情况，直接导致业务不可用了. 当然可以使用computed setter getter 解决，但是，由于业务中有大量的表单数据，使用computed改动成本很高. 望尤大能给一个好的解决方案, 谢谢！

Bug:

Chinese input method cause v-model data is not updated.

Code：http://jsbin.com/robetuzuxo/edit?html,js,output
demo: http://output.jsbin.com/robetuzuxo

When you use the mobile browser to open the demo, click the input field input box, switch to the Chinese input method, casually enter, and then click the submit button (do not click Finish or done) and found that the value of v-model is not updated, but found by native method Input value, found that the value is updated, how to deal with this situation? At present our solution is to re-package an input component out, but the previous on-line all the business now this situation, a direct result of the business is not available. Of course, I can use the computed setter getter to solve it, but because of the large number of forms in the business data, solve it with the use of high cost changes. so hope to give a good solution. Thanks.

[HerringtonDarkholme]

Possible duplicate of #5020

[posva]

@HerringtonDarkholme but this one is using an outdated Vue 2 version
@Jerret321 Can you please update your version and check if the error persists? You can use https://unpkg.com/vue

[jiangtao]

@posva we know the reason, some users may not done the Chinese input methods (IME) and we change the compositionend to compositionupdate. That's ok. But why vuejs use compositionend API.

[yyx990803]

Do you mean you expect v-model to sync the English letters? This is exactly what we want to prevent.

说实话我无法理解你的需求：既然用了中文输入法，不完成拼字意味着用户其实并没有输入任何东西。且不论有多少用户会有这样的操作习惯，即使 Vue 同步了 v-model，拿到的也是拼音，这在期望中文输入的情况下有什么意义？如果用户是错把中文输入法当英文输入法用，那这是用户的问题，不是 Vue 能解决的。

Vue 之所以不在 compositionupdate 的时候同步 v-model，是因为如果 v-model 的值在另一个地方被输出，用户一边打字另一个地方就会同步出很丑的未完成的拼音，这是一个常见的需求。而且在一些浏览器里面如果不在 compositionupdate 的时候跳过同步会导致拼音被重复输入，导致根本不可用。

[jiangtao]

@yyx990803 感谢你的回答，在我们的需求里，用户使用中文输入法输入文字，直接点击submit在safari 或 iOS webview里面显示是空的， 这个逻辑不合理，那怕很丑的未完成的拼音，用户在知晓的情况会 修改, 而 空 哪怕给出用户提醒，用户也无从理解。

[yyx990803]

你可以在提交的逻辑里检查空值，这样能给出更有针对性的提示。

[Justineo]

@yyx990803 Actually sometimes it's helpful to get English letters during the composition process. eg. Baidu instantly pop out search suggestions even when users are in the middle of composition by matching those letters to pinyin.

[zmmbreeze]

@yyx990803 Also met this problem. In my case, I want to create a fallback for placeholder property. We use v-model to get the value of input. If input has no value, placeholder will be visible. Because of this problem, it's inconsistent with browsers' default behavior.

browsers' default behavior:

vue version:

DEMO：https://jsbin.com/lisawij/edit?html,css,js,output

[HerringtonDarkholme]

My personal suggestion is to register compositionstart and compositionend manually.

https://jsbin.com/kiwalabaqa/1/edit?html,css,js,output

From Vue's issue tracking, it seems different IMEs and different application logics will require conflicting strategies. Leaving programmers to manually registering listeners might still be the expedient for now.

[JounQin]

Or add a new modifier on v-model?