【Vue.js学習メモ】入力欄でEnterキーを押したら更新する処理

初めに

入力フォームで、Enterを押したらsubmitが行われるようなコードを書きたかったので、調べました。

Enterキーを押したら更新するコード

書いたコードはこちらです。

• inputタグに@keyup.enter属性を付与する
• 値に実行したいメソッドを指定する

Enterキーを押したら更新するコード

<script type="module">
import { createApp } from 'vue'

createApp({
  data() {
    return {
      input: '',
      text: ''
    }
  },
  methods: {
    update() {
      this.text = this.input;
    }
  }
}).mount('#app')
</script>

<div id="app">
  <input v-model="input" @keyup.enter="update" placeholder="Type here">
  <p>{{ text }}</p>
</div>

解説：キー修飾子

キー修飾子とは、ある特定のキーが押された時の動作を設定すことができる機能。

• .enter
• .tab
• .delete
  など

余談：マウスボタン修飾子

キー修飾子同様、特定のマウスのボタンが押された時の動作を設定することができる機能

• .left
• .right
• .middle