Vue.js フォームと入力バインディング

フォームは Web アプリケーションの重要な部分であり、ユーザーがデータを入力して送信できるようにします。Vue.js は、ユーザー入力を管理し、それをアプリケーションデータと同期する直感的な方法を提供することで、フォームと入力バインディングの処理を簡素化します。この記事では、Vue.js でのフォームと入力バインディングの操作の基本について説明します。

入力バインディングの基礎

Vue.js では、フォーム入力の双方向データバインディングは、v-model ディレクティブを使用して実現されます。このディレクティブは、入力要素の値をデータプロパティにバインドし、入力への変更がデータに反映され、その逆も同様であることを保証します。

<template>
  <div>
    <input v-model="message" placeholder="Type something"/>
    <p>Message: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

この例では、v-model ディレクティブは入力フィールドの値を message データプロパティにバインドします。入力フィールドに入力されたテキストは、すぐに message プロパティに反映され、段落に表示されます。

さまざまな入力タイプの操作

v-model ディレクティブは、テキストフィールド、チェックボックス、ラジオボタン、選択ドロップダウンなど、さまざまな入力タイプで機能します。さまざまな入力タイプで v-model を使用する方法は次のとおりです。

テキスト入力:<input type="text" v-model="text" />
チェックボックス:<input type="checkbox" v-model="checked" />
ラジオボタン:<input type="radio" v-model="selected" value="option1" />
ドロップダウンを選択:<select v-model="selected"> <option value="option1">Option 1</option> </select>

フォーム送信の処理

フォームの送信を処理するには、<form> 要素で @submit イベントリスナーを使用できます。以下は、Vue.js でフォームの送信を処理する簡単な例です。

<template>
  <form @submit.prevent="submitForm">
    <input v-model="username" placeholder="Enter your username"/>
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      username: ''
    };
  },
  methods: {
    submitForm() {
      alert('Form submitted with username: ' + this.username);
    }
  }
};
</script>

この例では、@submit.prevent ディレクティブはフォームの送信イベントをリッスンし、デフォルトのアクションを防止します。submitForm メソッドが呼び出され、送信されたユーザー名を含むアラートが表示されます。

フォーム検証の使用

フォーム入力の検証は、フォーム処理の重要な部分です。Vue.js には組み込みの検証機能はありませんが、カスタムメソッドや VeeValidate などのサードパーティライブラリを使用して検証を処理できます。以下は、シンプルな検証メソッドを実装する方法の基本的な例です。

<template>
  <form @submit.prevent="validateForm">
    <input v-model="email" placeholder="Enter your email"/>
    <span v-if="!isEmailValid">Invalid email address</span>
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      isEmailValid: true
    };
  },
  methods: {
    validateForm() {
      const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      this.isEmailValid = emailPattern.test(this.email);
      if (this.isEmailValid) {
        alert('Form submitted with email: ' + this.email);
      }
    }
  }
};
</script>

この例では、validateForm メソッドは、電子メールアドレスが正規表現パターンと一致するかどうかを確認します。電子メールが有効な場合はフォームを送信し、そうでない場合はエラーメッセージが表示されます。

結論

Vue.js フォームと入力バインディングを理解することは、インタラクティブでデータ駆動型の Web アプリケーションを構築する上で非常に重要です。v-model ディレクティブを活用してフォームの送信を処理することで、ユーザー入力を効率的に管理し、動的なフォームを作成できます。これらのテクニックを活用すれば、Vue.js アプリケーションでさまざまなフォーム関連のタスクを処理できるようになります。

フォーム入力 vuejs モデルバインディング検証送信チェックボックスラジオ選択ハンドラーイベントメソッドインタラクション