【Vue.js】動的フォームの作り方とバリデーション設計｜項目の追加・削除を柔軟に対応

複数項目を自由に追加・削除できる「動的フォーム」は、アンケートや申し込みフォーム、複数商品の入力画面などで頻繁に登場します。

この記事では、Vue.jsで動的フォームを実装する方法と、バリデーション（入力チェック）を組み合わせて安全かつ柔軟に運用する設計例を紹介します。

動的フォームの基本構造
基本的なバリデーションの導入
外部ライブラリによる高度なバリデーション
動的フォームを活用する場面
まとめ

動的フォームの基本構造

Vue.jsで動的なフォームを構築するには、配列を使ってフォーム項目を管理します。以下は名前を複数入力できるシンプルな例です。

<template>
  <div>
    <div v-for="(field, index) in fields" :key="index" class="form-row">
      <input v-model="field.name" placeholder="名前を入力" />
      <button @click="removeField(index)">削除</button>
    </div>
    <button @click="addField">項目を追加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fields: [{ name: '' }]
    };
  },
  methods: {
    addField() {
      this.fields.push({ name: '' });
    },
    removeField(index) {
      this.fields.splice(index, 1);
    }
  }
}
</script>

このように配列fieldsを操作することで、フォーム項目の動的な追加・削除が可能になります。

基本的なバリデーションの導入

フォームに入力チェックを加えるため、Vue.js標準のリアクティブ機能とcomputedを使ってバリデーションロジックを組み込むことができます。


computed: {
  hasError() {
    return this.fields.some(field => !field.name.trim());
  }
}

このhasErrorを使って、ボタンの有効・無効を制御したり、エラーメッセージを表示することができます。

<button :disabled="hasError">送信</button>
<p v-if="hasError" class="error">すべての項目に入力してください。</p>

外部ライブラリによる高度なバリデーション

より複雑なバリデーションが必要な場合は、VeeValidateやYupなどのライブラリを活用すると効率的です。

例えば、VeeValidate 4を使用する場合は次のようになります：


import { useFieldArray, useForm } from 'vee-validate';
import * as yup from 'yup';

const schema = yup.object({
  fields: yup.array().of(
    yup.object({
      name: yup.string().required('名前は必須です')
    })
  )
});

const { handleSubmit, errors, values } = useForm({
  validationSchema: schema
});

const { fields, remove, push } = useFieldArray('fields');

このようにYupでスキーマを定義することで、動的フォームに対しても統一的で安全なバリデーションが可能になります。