Vue 2 で Element UI 2.x バージョンを使用している場合、v-for ループを通じて複数のネストされた el-form-item をレンダリングし、カスタムバリデーション機能を実装したい場合は、動的バリデーションルールの方法を使用できます。以下は、動的にレンダリングされたネストされた el-form-item のカスタムバリデーションを示すサンプルコードです：
コード#
<template>
<el-form :model="form" :rules="rules" ref="myForm">
<el-form-item v-for="(item, index) in formItems" :label="item.label" :key="index">
<el-input v-model="item.value" @blur="validateItem(index)"></el-input>
</el-form-item>
<el-button type="primary" @click="submitForm">送信</el-button>
</el-form>
</template>
<script>
export default {
data() {
return {
formItems: [
{ label: 'アイテム 1', value: '' },
{ label: 'アイテム 2', value: '' },
// ...
],
form: {},
rules: {}
};
},
methods: {
validateItem(index) {
this.$refs.myForm.validateField(`formItems.${index}.value`, error => {
// バリデーション結果の処理
});
},
submitForm() {
this.$refs.myForm.validate(valid => {
if (valid) {
// フォームバリデーションが成功した場合、送信操作を実行
// ...
} else {
// フォームバリデーションが失敗した場合、エラーメッセージを表示
// ...
}
});
}
},
mounted() {
this.rules = this.formItems.reduce((rules, item, index) => {
rules[`formItems.${index}.value`] = [
{ required: true, message: ` ${item.label} を入力してください`, trigger: 'blur' },
// カスタムバリデーションルール...
];
return rules;
}, {});
}
};
</script>
このサンプルでは、v-for ループを使用して複数のネストされた el-form-item をレンダリングし、各 el-form-item に動的な v-model をバインドしています。validateItem メソッドを通じて特定の el-form-item のバリデーションをトリガーし、このメソッドは index をパラメータとして受け取ります。
mounted ライフサイクルフック内で、reduce メソッドを使用して formItems 配列に基づいてバリデーションルールオブジェクト rules を動的に生成しています。このサンプルでは、required バリデーションルールを使用して各項目が空でないかをチェックする方法を示していますが、必要に応じて他のカスタムバリデーションルールを追加できます。
validateItem メソッド内では、this.$refs.myForm.validateField メソッドを使用して特定の el-form-item のバリデーションを行います。動的なフィールドパス formItems.${index}.value を使用してバリデーション対象のフィールドを指定し、バリデーション結果を処理するためのコールバック関数を渡します。
最後に、this.$refs.myForm.validate メソッドを使用してフォーム全体のバリデーションをトリガーし、コールバック関数内でバリデーション結果を処理し、適切な操作を実行します。
このサンプルは、formItems 配列内の各オブジェクトが label と value 属性を持っていることを前提としていますので、実際の状況に応じて調整してください。
バリデーションルール生成時には、動的なフィールドパス formItems.${index}.value を使用して各項目の値をマッチさせ、対応するバリデーションルールにバインドしています。
validateItem メソッド内では、this.$refs.myForm.validateField を使用して特定のフィールドのバリデーションを行います。動的なフィールドパスとコールバック関数を渡すことで、特定の el-form-item のバリデーションを行い、バリデーション結果のコールバック関数内で適切な処理を行います。
最後に、フォームを送信する際には、this.$refs.myForm.validate を使用してフォーム全体のバリデーションをトリガーし、コールバック関数内でバリデーション結果を処理します。