[Vue.js] ボタンクリックだけでなくEnterキー押下でもフォーム送信させる方法

管理者

2年前

概要
clickイベントで処理する場合
submitイベントで処理する場合

概要

Vue.jsでフォーム送信を行う場合、type=”button”のbutton要素やinput要素のclickイベントで処理するのが一般的である。
ボタンクリックだけでなくEnterキーを押した時にもフォーム送信したい場合は、form要素のsubmitイベントハンドラで処理する必要がある。

clickイベントで処理する場合

<html lang="ja">
<head>
  <meta charset="UTF-8">
</head>
<body>
<div id="app">
  <input type="text" v-model.trim="msg" />
  <button type="button" @click="handleButtonClick">送信</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp } = Vue
createApp({
  data() {
    return {
      msg: ''
    }
  },
  methods: {
    handleButtonClick: function() {
      const params = new FormData()
      params.append('msg', this.msg)
      fetch('/a.php', {method: 'POST', body: params})
      .then((response) => response.json())
      .then((json) => {
        //処理
      })
    }
  },
}).mount('#app')
</script>
</body>
</html>

submitイベントで処理する場合

<form @submit.prevent="xxxx"></form>を追加する
ボタンのtype属性をsubmitにする

<html lang="ja">
<head>
  <meta charset="UTF-8">
</head>
<body>
<div id="app">
  <form @submit.prevent="handleFormSubmit">
    <input type="text" v-model.trim="msg" />
    <button type="submit">送信</button>
  </form>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp } = Vue
createApp({
  data() {
    return {
      msg: ''
    }
  },
  methods: {
    handleFormSubmit: function() {
      const params = new FormData()
      params.append('msg', this.msg)
      fetch('/a.php', {method: 'POST', body: params})
      .then((response) => response.json())
      .then((json) => {
        //処理
      })
    }
  },
}).mount('#app')
</script>
</body>
</html>