Search code examples
javascriptvue.jskeyevent

vue 2 trigger computed with chinese input issue

I'm using vue2 to delveop my project.

I found that the computed property will only trigger when we keyup/keydown chinese input to a word.

(ex: ㄨㄛˇ => 我 It will only trigger 1 times not 3 times when it format to a word)

It's not like pure javascript's event. Is that correct !?

Solution

  • You are correct! From the docs (https://v2.vuejs.org/v2/guide/forms.html):

    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.

    Try this:

    new Vue({
  el: '#app',
  data: {value: ''}
})
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>

<div id="app">
  <p>The value is: {{value}}</p>
  <input v-on:input="value = $event.target.value"/>
</div>