Vue.js で日本語の変換中に `keyup.up` や `keyup.down` が発火しないようにする

対処方法

• $event ( KeyboardEvent インスタンス) の isComposing をチェック
• Edge や IE では動かない

developer.mozilla.org

例

<template>
  <div>
    <input
      :value="inputValue"
      @keyup.up="onKeyUp($event)"
      class="input"
      type="text"
    >
  </div>
</template>

<script>
export default {
  name: 'TestComponent',
  data () {
    return {
      inputValue: '',
    };
  },
  methods: {
    onKeyUp (event) {
      if (event.isComposing) {
        // 変換が未確定の時に何もしない
        return;
      }

      // do something.
    },
  },
};
</script>