blog

要素 UI フォーム フォーム項目を動的に増減する

ここでpropプロパティの設定は微妙な問題であり、この形式の設定に従わない場合、以下は常に一致する値が見つからないのエラーを報告するか、チェックルールがエラーになっている、単にチェックを通過することは...

Nov 11, 2020 · 2 min. read

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に基づいており、レイヤーからレイヤーを下へ下へとバインドされた値をトラバースすることで見つけ、それを見つけ、それを返し、それを見つけなければ、エラーを投げます。

Read next

Reflect.definePorperty注:列挙は無視される。

今日、この新しいプロパティをトラバースできないことに遭遇しました。 コンソールにはこのプロパティが表示されますが、グレーアウトしています。

Nov 11, 2020 · 1 min read

練習問題を解く(1)

Nov 11, 2020 · 2 min read

TCPプロトコルの解釈

Nov 10, 2020 · 3 min read

git

Nov 10, 2020 · 2 min read