Element中表单验证的基本方法可参照 官方说明
<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
<el-form-item
prop="email"
label="邮箱"
:rules="[
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
]"
>
<el-input v-model="dynamicValidateForm.email"></el-input>
</el-form-item>
<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-button @click.prevent="removeDomain(domain)">删除</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
<el-button @click="addDomain">新增域名</el-button>
<el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
dynamicValidateForm: {
domains: [{
value: ''
}],
email: ''
}
};
},
methods: {}
}
</script>
这是官方的一个例子，例子中包含一个表单，数据结构是：
dynamicValidateForm：{
email：'', // 基本属性
domains:[] // 数组
}
"域名"表单项用了一个v-for来动态新增，需要注意的是:prop的值，常见的错误信息是"Error: please transfer a valid prop path to form item!"，例子中使用的是'domains.' + index + '.value'，其实和prop="email"类似，用链式结构表示。
如果 ，数据的结构是
dynamicValidateForm:{}
domains:[]
要整理成以上的结构（如果一定要这样实现），容易有坑！！
<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-select filterable v-model="domain.value" placeholder="请选择" >
<el-option
v-for="item in domain.options"
:key="item.value"
:label="item.label"
:value="item.value" >
</el-option>
</el-select>
</el-form-item>
<script>
export default {
data () {
dynamicValidateForm：{
email：'', // 基本属性
domains:[] // 数组
}
},
created () {
this.id = this.$route.params.id
// 有ID，则是编辑页面，否则是新增页面
if(this.id){
this.getData()
}
}，
methods: {
getData(){
getData(this.id).then(res => {
this.dynamicValidateForm = res.data.dynamicValidateForm
this.dynamicValidateForm.domains = res.data.domains
})
}
}
}
</script>
进入页面后，发现进入编辑页面后，选择框选择后没反应了，页面也没有报错~~~
为什么呢？
找了半天原因，找了<select>的文档，没发现问题 ~~~~~
终于，
this.dynamicValidateForm = res.data.dynamicValidateForm this.dynamicValidateForm.domains = res.data.domains
这两行代码，第一行由于res.data.dynamicValidateForm就是一个object，它并没有domains这个属性，赋值后，dynamicValidateForm 中也没有domains这个属性了。而第二行代码，赋值给domains ，没有报错，可是使用的时候，这个属性却不会生效。而<select>绑定的可是domains 中的值。。
解决方法：
this.$set(this.dynamicValidateForm,'domains ',res.data.domains)
在vue.js中，给对象赋值，最好还是使用$set
