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

投稿日: 2022-04-20 2022-10-07
タグ: 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キーを押すと処理されます。過去、現在、または将来のフォーム送信の他の方法が処理されます。

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

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

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

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

getdocs

13036