Vue.jsでエンターを押したときの挙動を指定する

何か入力した後エンターキーで処理を開始したい時などに使いそうなやりかた。

v-on

を使う。

v-on:keydown.enter=”onSearch” のようにエンターが押されたときの関数名(onSearchなど)を指定する。

HTML:

<input v-on:keydown.enter="onSearch" class="form-control" v-model="alphabets_input" placeholder="探したいアルファベットを入れてください。"></input>

JS:

    methods: {
      onSearch() {
        if(!this.alphabets_input){
            return;
        }
        // 何らかの処理
      }
    }

実例としてwordleの単語を探すツールwordle searcher で実装しています。