element UI
フォーム項目を動的に追加・削除するフォームフォーム
最近、フォーム項目のニーズをカスタマイズする必要性を受け取ったが、新しい項目をチェックする必要がある一方、プロジェクトは、このUIコンポーネントの要素を使用するので、組み込みのフォームコンポーネントの使用は、機能を達成するために、しかし、ピットを発見し、1時間か2時間を投げ、それを記録します！
以下は公式サイトからの例です。
<el-form :model="dynamicValidateForm" ref="dynamicValidateForm">
<el-form-item
v-for="(domain, index) in dynamicValidateForm.domains"
:label="' ' + index"
:key="domain.key"
:prop="'domains.' + index + '.value'"
:rules="{
required: true, message: 'ドメイン名を空にすることはできない', trigger: 'blur'
}"
>
<el-input v-model="domain.value"></el-input>
</el-form-item>
</el-from>
<script>
export default {
data() {
return {
dynamicValidateForm: {
domains: [{
value: ''
}],
email: ''
}
};
},
}
</script>
ここで、propプロパティの設定は微妙な問題であり、あなたがこの形式に従わない場合、以下は常に一致する値が見つからないというエラーを報告するか、チェックサムルールがエラーであり、チェックサムを渡すことができません。
:prop="'domains.' + index + '.value'"
ここで、domains はバインディング値からフォームの下のループ本体のキー、index は現在の添え字、value は現在のループ・オブジェクトの v モーダルバインディングのキーです。
エレメントuiのソースコードに戻って、このプロップとのマッチングを確認してください。
fieldValue() {
const model = this.form.model;
if (!model
!this.prop) { return; }
let path = this.prop;
if (path.indexOf(':') !== -1) {
path = path.replace(/:/, '.');
}
return getPropByPath(model, path, true).v;
}
ここで、彼はgetPropByPathこのメソッドを介して一致する値、3つのパラメータを取得することを発見し、最初のバインディング値のフォームであり、2番目はpropにバインドformItemです（つまり：prop = "'domains.' + index + '.value'"）。
以下は具体的な getPropByPath マッチメソッドです。
export function getPropByPath(obj, path, strict) {
let tempObj = obj;
path = path.replace(/\[(\w+)\]/g, '.$1');
path = path.replace(/^\./, '');
let keyArr = path.split('.');
let i = 0;
for (let len = keyArr.length; i < len - 1; ++i) {
if (!tempObj && !strict) break;
let key = keyArr[i];
if (key in tempObj) {
tempObj = tempObj[key];
} else {
if (strict) {
throw new Error('please transfer a valid prop path to form item!');
}
break;
}
}
return {
o: tempObj,
k: keyArr[i],
v: tempObj ? tempObj[keyArr[i]] : null
};
};
エラーを参照してください、フォームアイテムに有効なpropパスを転送してください！理由は、propがデータと一致しないからです。propのルールはpropに基づいており、レイヤーからレイヤーを下へ下へとバインドされた値をトラバースすることで見つけ、それを見つけ、それを返し、それを見つけなければ、エラーを投げます。
