Vueのkeydown.enterで日本語入力中は無視するようにする

Vueのキーイベントで@keydown.enterを設定すると、
日本語の変換中に押したEnterでも発火してしまう。。
なにも変換後のみに発火させたいなと思ったときの備忘録

日本語入力中とそうでないときはkeyCodeが違うらしい

Qiita記事にすべて書いてあった。。

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

自分用にTSに書き直すとこんな感じ。

<template>
  <input @keydown.enter="onKeydownEnter($event.keyCode)">
</template>

<script lang="ts">
import { Component, Vue } from "nuxt-property-decorator";

@Component
export default class MyComponent extends Vue {
  private onKeydownEnter(keyCode: number) {
    if (keyCode !== 13) return;
    // 実行したい処理
  }
}
</script>

以上!!

おすすめの本

Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発

Vue.js入門 基礎から実践アプリケーション開発まで

基礎から学ぶ Vue.js

改訂新版　Vue.jsとFirebaseで作るミニWebサービス (技術の泉シリーズ（NextPublishing）)

参考にしたサイト様

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