PSA：Vue.jsでの適切なフォーム処理

フォームは、ほとんどすべてのWebアプリケーションの不可欠な部分です。これらは実際には、ユーザーから情報を取得し、それをある種の機械可読データモデルに変換する方法にすぎません。 HTML form要素がどのように機能し、特にVue.jsなどのライブラリでユーザー送信とイベントバインディングを処理する場合に、それがどのように生活を簡素化できるかを誰もが正確に理解しているわけではありません。今こそ、記録を正す時です。

悪い道

多くの場合、次のようなことをしている人がいます:(データ送信ハンドラーを親要素とボタンクリックイベントにバインドします）。

<template>
  <div @keydown.enter="handleSubmit">
    <label>
      Email:
      <input type="email" v-model="user.email"/>
    </label>
    <label>
      Name:
      <input type="text" v-model="user.name"/>
    </label>
    <label>
      Password:
      <input type="password" v-model="user.password"/>
    </label>
    <button @click="handleSubmit">Submit</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        email: '',
        name: '',
        password: ''
      }
    }
  },

  methods: {
    handleSubmit() {
      // Send data to the server or update your stores and such.
    }
  }
}
</script>

さて、これが悪い考えである理由はたくさんあります。一つには、スクリーンリーダーなどがフォーム内にあることを知るのが難しくなります。さらに、イベントハンドラーをボタンとそれを含む要素の両方にバインドする必要がありますが、それでも実際にはすべてのユースケースを処理するわけではありません。あなたはほとんどこのようなことをしてはいけません。

良い方法

それで、あなたは何をすべきですか？まあ、実際にはそれは本当に簡単です。 <form>要素を使用してください！

<template>
  <!-- @submit handles any form of submission. -->
  <!-- .prevent keeps the event from bubbling around and doing anything else. -->
  <form @submit.prevent="handleSubmit">
    <label>
      Email:
      <input type="email" v-model="user.email"/>
    </label>
    <label>
      Name:
      <input type="text" v-model="user.name"/>
    </label>
    <label>
      Password:
      <input type="password" v-model="user.password"/>
    </label>
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      user: {
        email: '',
        name: '',
        password: ''
      }
    }
  },

  methods: {
    handleSubmit() {
      // Send data to the server or update your stores and such.
    }
  }
}
</script>

ブーム。ボタンのクリックが処理されます。 Enterキーを押すと処理されます。過去、現在、または将来のフォーム送信の他の方法が処理されます。

かなりの数のフロントエンド開発者が、優れた' ol<form>要素を忘れたり無視したりしているようです。おそらく、彼らの伝統的なホストされたPHP-レンダリングされたページの日からの誤解/恐ろしい思い出のためです。多くの場合、開発者が<form>要素を使用することを妨げる誤解には次のものが含まれます。

それがページの更新を強制すると仮定します。
制御不能な要求を行うmethodおよびactionプロパティを設定する必要があると仮定します。
フォームに一意のnameを設定する必要があると仮定します。

それらのどれも真実ではありません。他に何も設定されていない場合、フォームは実際には入力フィールドの便利なラッパーであり、ユーザーが選択した任意のフォームの送信を追加のロジックなしで処理できます。

続けて<form>を使用してください。他の誰かがユーザー入力のためにキー押下とボタンクリックを手動で処理するのを見たくありません。 HTMLが提供する要素を使用するだけです！