vue.jsで一行テキストボックスのイベント処理について調べたのでまとめ。

エンターキーを押したことを検知する場合、@keydown(v-on:keydown).enter.nativeと書く。 @keydown.enterだけだと検知できなかった。

methodsで定義した各メソッドの引数(text)に、入力した文字が入ってくる。

inputSearchWord() = 入力文字が変更されるたびに呼ばれる。 enterSearchWord() = エンターキーが押された時に呼ばれる。

<template>
<div id="search-field">
  <fieldset class="search-field-set">
    <ul>
      <li>
        <el-input
          placeholder="Type something"
          prefix-icon="el-icon-search"
          @keydown.enter.native="enterSearchWord"
          @input="inputSearchWord">
        </el-input>
      </li>
    </ul>
  </fieldset>
</div>
</template>

<script>
export default {
  name: 'search-field',
  methods: {
    inputSearchWord: function(text) {
      console.log('inputSearchWord')
      console.log(text)
    },
    enterSearchWord: function(e) {
      const text = e.target.value
      console.log('enterSearchWord')
      console.log(text)
    }
  }
}
</script>

参考