VueのEnterキーイベントで日本語入力中のEnterを制御する

やりたいこと

• Enterキーイベントをトリガーに操作をしたい
• 日本語入力中のEnterキーはトリガーを走らせたくない

どうすればよいか

@keyup.enter だといずれのEnterもkeyCode = 13を返してしまうが、@keydown.enterであれば日本語入力中のEnterはkeyCode = 229を返すので、@keydown.enterで判断すれば良い。

<div id="app">
  <!-- 日本語入力中のEnterでもイベントが発火してしまう -->
  <input @keyup.enter="trigger" placeholder="keyup.enter">
  <!-- 日本語入力中のEnterではイベント発火しない -->
  <input @keydown.enter="trigger" placeholder="keydown.enter">
</div>
<script>
new Vue({
  el: "#app",
  methods: {
    trigger: (event) => {
      // 日本語入力中のEnterキー操作は無効にする
      if (event.keyCode !== 13) return
    
      // 実行したい処理
    }
  }
})
</script>