概要

ユーザーにフォームに入力させる際に、確定のEnterをトリガーにしてpostしたくて実装していたのですが、
フォーム入力時のEnterも関数が動いてしまいました。

IME(日本語等の文字入力)の場合は通常のEnterとキーコードが違ったみたいで、このような事象が起こったようです。
その解決法をメモします。

実装

通常のEnterキーコード以外は受け付けないようにすれば良いです。
Enterは'13'でIME入力のEnterは'229'みたいなので、13以外は受け付けないようにします。

Vue.jsで実装します。

キーコード一覧
↓
https://shanabrian.com/web/javascript/keycode.php

.vue

<template>
<div>
      <input
        id="search"
        v-model="word"
        type="search"
        placeholder="キーワードを入力..."
        @keydown.enter="searchTags">
</div>
</template>
<script>
  computed: {
    word: {
      get() {
        return this.$store.getters['search/word']
      },
      set(val) {
        this.$store.commit('search/setWord', val)
      },
    },
  },
  methods: {
    async searchTags(e){
      if (e.keyCode !== 13) return
      this.$store.dispatch('search/searchTags')
    },
  },
</script>

@keydown.enterでキー入力のイベントを取得します。

.js

if (e.keyCode !== 13) return

でキーコードが13以外の場合はそのままreturnします。

参考文献

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