In Vue2 with elementUI, if you need form validation in a dynamic form, the official documentation solution

Element. The eleme. Cn / # / useful – cn/com…

​

<el-form-item v-for="(domain, Index) in dynamicValidateForm. Domains: "label =" 'domain' + index "is: the key =" domain. The key ": prop = 'domains.'" + index + 'value'" :rules="{required: true, message: 'Domain name cannot be empty ', trigger: 'blur'}" >< el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)"> delete </el-button> </el-form-item>Copy the code

If it is a multilayer form mutual nesting, similar ideas For example, 1 segmentfault.com/a/119000001… For example 2 www.cnblogs.com/shy1766it/p…

However, if multiple layers of convenience facilitate the irregular generation of nested El-form-items (sub-components and generate multiple El-form-items), irregular dynamic verification, Domains.’ + index + ‘.value’ ‘= ‘domains.’ + index + ‘.value” = ‘domains

A simpler way to write it

html

<! <el-form-item prop="testRules" :rules="testRules(' self ')" > <el-input V-model. Trim ="test" Placeholder =" /> </el-form-item>Copy the code

js

// Can be placed directly in data testRules: (data) => { return [ { validator:(rule, value, Callback) => {if(! Data){callback(new Error('! Form validation '));} // Callback ();}, trigger: 'blur'}]; }Copy the code

Prop =”‘domains.’ + index + ‘.value’