もし 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 ライフサイクルフックでは、formItems 配列に基づいて rules オブジェクトを動的に生成しています。このサンプルでは、各項目が空でないかどうかをチェックするために required バリデーションルールを使用していますが、必要に応じて他のカスタムバリデーションルールを追加することができます。
validateItem メソッドでは、this.$refs.myForm.validateField メソッドを使用して特定のフィールドのバリデーションを行っています。動的なフィールドパス 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 を使用してフォーム全体のバリデーションをトリガーし、コールバック関数でバリデーション結果を処理しています。